[分享]css两行三列

在Web开发中，常常需要使用CSS来进行页面布局。其中，实现两行三列布局是一种比较常见的需求。下面，我们来介绍一种比较简洁的实现方式。.container{ display: grid; gridte...

在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中，从而实现两行三列布局。

最终效果如下：