css常用布局多行多列

CSS常用布局多行多列，可以包含多种布局方式：固定宽度、自适应、响应式等。通常这种布局方式用于网站的核心布局，相当于是网站的骨架。以下是详细的攻略：

栅格系统

栅格系统（Grid System）是常见的CSS布局方式之一，它能够快速构建多行多列的布局。它通过网格的概念建立起一个矩阵系统，可以让内容根据不同的要求排列。我们可以挑选成熟的栅格系统，也可以自己通过CSS编写栅格系统。

示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 20px;
}

这段代码展示了一个3列的栅格布局，minmax函数可以让列的宽度自适应，而auto-fill函数可以让列自动调整填充空间，达到自适应的效果。

圣杯布局

圣杯布局（Holy Grail Layout）是一种常见的CSS布局，它常用于网站的核心布局。它包含一个主体容器和两个侧边栏，能够实现三列布局。它的主要特点是弹性和多用途，能够适应不同窗口大小和不同设备的要求。

示例代码：

<div class="container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

.container {
  display: flex;
  flex-flow: row wrap;
  height: 100%;
  margin: 0 -200px;
}

.left {
  width: 200px;
  margin-left: -100%;
  order: 1;
}

.right {
  width: 200px;
  margin-right: -100%;
  order: 3;
}

.main {
  flex-grow: 1;
  order: 2;
}

这段代码展示了一个包含左右两个侧边栏和一个主体容器的布局，其中flex属性可以让主体容器自适应空间，而order属性可以控制子元素的顺序。通过为不同的元素添加不同的属性即可实现布局效果。