css - 如何使网格区域始终为页面的 100% 宽度？

Question

我正在构建一个简单的日历。这 7 天应该始终占据 100% 的屏幕（可以单独收缩或扩展以适应不同的屏幕尺寸）。

我认为这就像将父 div 设置为 100% 一样简单，但是 shi 没有奏效。

这就是我的 HTML 的样子

                     <div className="weeks">

                        <div className="week1">
                            <div className="dayDiv">
                                </div>
                            <div className="dayDiv">
                                </div>
                            <div className="dayDiv">
                                </div>
                            <div className="dayDiv">
                                </div>
                            <div className="dayDiv">
                                </div>
                            <div className="dayDiv">
                                </div>    
                        </div>

                     </div>
...

这就是我的 CSS 的样子。

.week1 {
        grid-template-areas: "x . . . . . .";
        width: 100%;
    }

.dayDiv {
    margin: 10px;
    background-color: blanchedalmond;
    padding: 50px;
    margin-bottom: 10px;
    margin-top: 10px;
}

标签： css

Answer 1

.week1 {
        grid-template-areas: "x . . . . . .";
        width: auto;
    }

try this