[分享]css两行两列

CSS是一种用来控制网页显示的语言，通过使用CSS可以设计出各种不同的网页效果。其中使用两行两列的布局是经常被使用的布局之一，可以帮助我们实现更好的用户体验。/ CSS代码 / .container ...

CSS是一种用来控制网页显示的语言，通过使用CSS可以设计出各种不同的网页效果。其中使用两行两列的布局是经常被使用的布局之一，可以帮助我们实现更好的用户体验。

/* CSS代码 */
.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 50%;
} 

上述CSS代码使用了Flexbox布局，其中.container为容器元素，.box为子元素，通过指定容器元素display为flex可以使子元素按照一定的规则排列，而flex-wrap则表示换行的方式。

.box的宽度被设置为50%，这样两个.box元素就可以平均占据.container的宽度。当然，我们也可以使用grid布局来实现这一效果。

/* CSS代码 */
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr;
}
.box {
  background-color: #fff;
  border: 1px solid #000;
  padding: 10px;
} 

上述CSS代码使用了grid布局，其中.container为容器元素，.box为子元素，通过指定grid-template-columns和grid-template-rows可以实现网格布局。

在.box中我们还可以添加一些样式，例如背景颜色、边框和内边距等等，以使得布局更加美观。

无论是使用Flexbox还是grid，两行两列布局都是一种非常实用的网页布局方式，可以帮助我们实现更加优美的页面效果。