在Web开发中,常常需要使用CSS来进行页面布局。其中,实现两行三列布局是一种比较常见的需求。下面,我们来介绍一种比较简洁的实现方式。.container{ display: grid; grid-t
在Web开发中,常常需要使用CSS来进行页面布局。其中,实现两行三列布局是一种比较常见的需求。下面,我们来介绍一种比较简洁的实现方式。
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.box{
background-color: #ccc;
padding: 20px;
font-size: 20px;
}
以上代码中,我们首先使用CSS3的grid布局,将父容器设置为三列两行。其中,grid-template-columns: 1fr 1fr 1fr;
中的fr
表示分数单位,即将整个父容器分成三个等宽的块。
接着,我们将子元素设置为box
类,用来演示实现两行三列布局的效果。
<div class="container">
<div class="box">Content 1</div>
<div class="box">Content 2</div>
<div class="box">Content 3</div>
<div class="box">Content 4</div>
<div class="box">Content 5</div>
<div class="box">Content 6</div>
</div>
以上是HTML代码。我们将六个box
类的子元素放入父容器container
中,从而实现两行三列布局。
最终效果如下:
粉丝
0
关注
0
收藏
0