本文共 2623 字，大约阅读时间需要 8 分钟。

自适应 CSS 栅格布局

我们可以使用什么栅格？

简而言之：我们实际上可以使用几乎所有能够想到的栅格布局，并且还不限于此。我们可以自由地选择不同栅格的尺寸、大小和位置。你可以在栅格示例中找到最常见的带有标记的栅格的概述。

让我们从构建示例的 HTML 标记开始吧！

一个类名为 container 的 div 元素容纳了 5 个子 div 元素，或称之为项目（当然，可以比 5 个更多或者更少）。如果你愿意，我们可以直接从 CodePen 中的 HTML 和 CSS 标记代码入手。

   
    
    
     item-1
    
    
    
     item-2
    
    
    
     item-3
    
    
    
     item-4
    
    
    
     item-5
    
   

基础：在 CSS 中设置栅格和行列

在 CSS 中，我们可以通过 display: grid 定义将 .container 类的元素变为栅格布局。通过使用 grid-template-columns，我们划分了所需的列（本例中将划分 5 列，每列设置为 250px）。通过使用 grid-template-rows，我们可以设置行的高度（如果需要的话），本例中是 150px。完成以上步骤之后，我们就实现了第一个栅格布局！

.container {
       display: grid;    grid-template-columns: 250px 250px 250px 250px 250px;    grid-template-rows: 150px;}/* 缩写： grid-template-columns: repeat(5, 250px); */

设置间隔

我们可以使用 grip-gap 来设置每一项之间的间隔，也可以使用 column-gap 和 row-gap 分别设置水平和垂直的间隔。顺便提一句，我们可以使用所有通用单位，例如使用 px 用于设置固定的间隔，或使用 ％ 来设置自适应的间隔。

.container {
       display: grid;    grid-template-columns: repeat(5, 250px);    grid-template-rows: 150px;    grid-gap: 30px;}

使用 fr 自动填充剩余空间

这可是每一个设计师的梦想！我们可以使用 分数单位（Fractional Units）或简写 fr，根据我们自己的想法分配可用空间！例如，在这里，我们将屏幕空间划分为 6 个部分。第一列占用空间的 1/6 = 1fr，第二列 3/6 = 3fr，第三列 2/6 = 2fr。当然，我们也可以根据需要添加 grid-gap。

.container {
       display: grid;    grid-template-columns: 1fr 3fr 2fr;}

混合使用 px 和 fr 构建自适应而又固定的列

px 和 fr 的按需同时使用可以让栅格适应可用的空间，这非常好用！

.container {
       display: grid;    grid-template-columns: 300px 3fr 2fr;}

排序上的绝对自由

私以为，最棒的是在栅格中，我们可以自由设置每一项所占用的尺寸！我们可以用 grid-column-start 设置起点，并用 grid-column-end 设置终点，或采用缩写方式 grid-column: startpoint / endpoint;

.container {
       display: grid;    grid-template-columns: 1fr 3fr 2fr;}.item-1 {
       grid-column: 1 / 4;}.item-5 {
       grid-column: 3 / 4;}

同样适用于垂直或全区域的分布！

在这方面 CSS Grid 耀眼十足，表现出了对比 Bootstrap 和 Co 的优越性 —— 借助 grid-row，每一项都可以定义任意的位置及宽度。正如我们将在下一个示例中看到的那样，这对于适应不同屏幕尺寸和设备具有绝对优势：

.container {
       display: grid;    grid-template-columns: 1fr 3fr 2fr;}.item-2 {
       grid-row: 1 / 3;}.item-1 {
       grid-column: 1 / 4;    grid-row: 3 / 4;}

想要适应不同的屏幕尺寸和设备？当然没问题！

CSS Grid 与常规栅格相比也具有明显的优势，根据屏幕大小，我们不仅可以通过媒体查询从自适应值切换到固定值，还可以调整整个项目的位置！

.container {
       display: grid;    grid-template-columns: 250px 3fr 2fr;}.item-1 {
       grid-column: 1 / 4;}.item-2 {
       grid-row: 2 / 4;}@media only screen and (max-width: 720px) {
       .container {
           grid-template-columns: 1fr 1fr;    }    .item-1 {
           grid-column: 1 / 3;        grid-row: 2 / 3;    }    .item-2 {
           grid-row: 1 / 1;    }}

转载地址：https://blog.csdn.net/qsj0606/article/details/115370554 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！