如何使用HTML CSS Grid布局实现指定列排列的5个盒子？

实现方案 #

你需要给Grid容器定义行列规则，同时给首尾两个盒子配置跨行属性即可实现需求，修改后的完整代码如下：

<div class="container" style="border: 1px solid; width: 500px; height: 300px; padding: 10px; margin: 0 auto; display: grid; grid-gap: 10px; grid-template-columns: 1fr 100px 1fr; grid-template-rows: repeat(3, 1fr);">
    <div class="box1" style="border: 1px solid; text-align: center; grid-column: 1 / 2; grid-row: 1 / 4;">
        <p>Box1</p>
    </div>
    <div class="box2" style="border: 1px solid; text-align: center; width: 100px;">
        <p>Box2</p>
    </div>
    <div class="box3" style="border: 1px solid; text-align: center; width: 100px;">
        <p>Box3</p>
    </div>
    <div class="box4" style="border: 1px solid; text-align: center; width: 100px;">
        <p>Box4</p>
    </div>
    <div class="box5" style="border: 1px solid; text-align: center; grid-column: 3 / 4; grid-row: 1 / 4;">
        <p>Box5</p>
    </div>
</div>

修改说明 #

• 容器新增grid-template-columns: 1fr 100px 1fr定义三列宽度：中间列固定100px匹配你设置的box2/3/4宽度，左右两列按比例分配剩余空间。
• 容器新增grid-template-rows: repeat(3, 1fr)定义3行高度，每行均分容器高度刚好适配第二列的3个盒子。
• box1新增grid-column: 1 / 2; grid-row: 1 / 4配置，直接占满第一列全部三行高度。
• box5新增grid-column: 3 / 4; grid-row: 1 / 4配置，直接占满第三列全部三行高度。

如果需要调整三列的宽度比例，直接修改grid-template-columns的参数即可，比如要让第一列更宽，可以改成2fr 100px 1fr。

内容的提问来源于stack exchange，提问作者Yamuna GC