CSS Grid容器宽度超出列总和的异常问题咨询

示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .container{
            border: 2px solid brown;
            display: grid;
            grid-template-columns: 400px 300px;
            grid-template-rows: 150px 250px auto;
        }
        .item{
          border: 2px solid black;
          margin: 5px;
          height: 100px;
          width: 100px;
          background-color: yellow;
        }
        .item1{

        }
        .item2{

        }
        .item3{

        }
        .item4{

        }
        .item5{

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
    </div>
</body>
</html>

问题 #

从上述代码可见，我未为div.container元素设置任何宽度，理论上它应取列的总宽度700px（400px+300px），但如图所示容器宽度却大于该值，请问这是什么原因？

解答 #

核心原因是CSS Grid容器的默认对齐规则：

• Grid容器的justify-content属性默认值为stretch，当容器的可用空间（这里是父元素body的宽度减去默认margin）大于网格列的总宽度（700px）时，这个属性会让网格列自动拉伸，填满容器的可用宽度，最终导致容器的宽度等于父元素的可用宽度，自然超过700px。

你可以通过修改容器样式验证：给.container添加justify-content: start;，容器就会收缩到网格列总宽度700px，和预期一致。

内容的提问来源于stack exchange，提问作者Warlock Gaming