面试官：「网格布局」

Mh2024-01-02 17:39

前言：

网格布局是一种常见的页面布局方式，它将页面分成多个网格，每个网格可以放置不同的内容或元素。网格布局的优点包括易于设计、易于维护、良好的可读性和可访问性等。

网格布局 vs 弹性布局

  1. 从字面意思也很好理解，网格布局的本身是将页面划分为两个维度，分别是行和列，而学过弹性布局的同学都知道，弹性布局更多的关注单一的维度，所以我们可以简单的理解，弹性布局（flex）是一维布局，而网格布局（gird）是二维布局。所以也就注定了网格布局的应用比弹性布局更加的广泛和强大。
  2. 网格布局和弹性布局有很多相似的地方，比如在网格布局和弹性布局中都可以简单的分为两大类。分别是 容器属性 和 项目属性，如果还没有看过弹性布局的同学建议先去看下弹性布局，这对于更好的理解网格布局很有好处。

容器属性

（一）display 属性

  1. display:grid 用于创建一个块级元素的网格容器
  2. dipaly:inline-grid 用于创建一个内联元素的网格容器

（二）grid-template-columns 属性 & grid-template-rows 属性

它们的作用分别是设置容器的列宽和行高，比如设置一个容器的中的项目行高和列宽分别是 40px 60px 80px，代码如下：

less 复制代码 
ul {
    display: grid;
    grid-template-columns: 40px 60px 80px; // 列宽
    grid-template-rows: 40px 60px 80px; // 行高
}

效果如下：（这里省略了项目的样式代码）

接下来介绍几个常见的函数和关键字：

repeat() 函数： 用于简化重复的值，该函数接收两个参数，分别是重复的次数以及重复的值。

比如当项目的排列的高度都是一样的，但是我们又不想写重复的代码，这个时候就可以这样下了：

less 复制代码 
  ul {
    display: grid;
    grid-template-columns: 50px 100px 150px;
    // grid-template-rows: 50px 50px 50px;   // 下面是简写
    grid-template-rows: repeat(3, 50px);
  }

效果如下：

auto-fill 关键字： 表示自动填充，当我们想要当前容器的行或者列中尽可能多的排列项目，排列不下的项目自动换行，这个时候就可以使用auto-fill。

代码如下：

less 复制代码 
  ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
  }

效果如下：

（三）row-gap 属性、column-gap 属性以及 gap 属性

row-gap表示行间距，column-gap表示列间距，grid-gap表示行列间距的缩写。比如我们需要设置一个行间距是10px 列间距是20px的网格布局，代码如下：

less 复制代码 
    display: grid;
    grid-template-columns: 200px 200px 200px;
    row-gap: 10px;
    column-gap: 20px;
    // 也可以如下缩写
    // gap: 10px 20px;

效果如下：

（四）grid-template-areas 属性以及 grid-areas属性

grid-template-areas 属性在 CSS Grid 布局中用于定义网格区域。这个属性允许您为网格容器中的单元格定义特定的区域，并为这些区域命名。通过这些区域名称，您可以在网格项中使用 grid-area 属性来放置内容。

使用 grid-template-areas 属性，您可以以更直观和组织化的方式来管理网格中的内容。您可以定义任意数量的区域，并根据需要为每个区域命名。每个区域可以由单个或多个单元格组成。

vue中模版代码如下：

html 复制代码 
    <ul>
      <li
        v-for="item in example"
        :class="item.class"
      />
    </ul>

css代码如下：

less 复制代码 
  ul{
    display: grid;
    grid-template-columns: 40px 200px 1fr;
    grid-template-rows: 50px 100px 50px;
    gap: 10px;
    grid-template-areas: 'header header header' 'sidebar main main' 'footer footer footer';
    
    .header {
      grid-area: header;
      background-color: red;
    }

    .sidebar {
      grid-area: sidebar;
      background-color: blue;
    }

    .main {
      grid-area: main;
      background-color: yellow;
    }

    .footer {
      grid-area: footer;
      background-color: black;
    }
  }

效果如下：

（五）grid-auto-flow 属性

grid-auto-flow 属性用于控制容器中的项目的流动方向，常见的属性值如下：

  1. row：这是默认值，表示网格子项将按照行的顺序进行放置，先填满第一行，然后继续到下一行。
  2. column：表示网格子项将按照列的顺序进行放置，先填满第一列，然后继续到下一列。
  3. row dense ：这个值类似于 row，但它会尝试"紧密填充"网格中的空白空间。这意味着如果某行中有足够的空间放置更大的网格子项，它会被放置在那里，而不是留空。
  4. column dense ：这个值类似于 column，但它也会尝试"紧密填充"网格中的空白空间。

代码如下：

less 复制代码 
  // 父容器
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-auto-rows: 50px;
  gap: 10px;
  grid-auto-flow: row;
  
  // six子项目
  grid-column-start: span 2;

效果如下：

如上的效果，你会发现five和six之间有一块空白的空间没有被填充，这是由于six大于空白处的长度，如果想让它自动填充空白的空间，可以设置grid-auto-flow: row dense';这个时候就会自动填充剩余空间，效果如下：

（六） justify-items 属性、align-items 属性以及 place-items 属性

justify-items 属性用于控制容器中项目水平方向的对齐方式， align-items属性用于控制容器中项目垂直方向的对齐方式，place-items是以上两个属性的缩写。它们的属性值如下：

  • start：网格项垂直居中对齐，水平左对齐。
  • center：网格项垂直居中对齐，水平居中对齐。
  • end：网格项垂直居中对齐，水平右对齐。
  • stretch：网格项垂直拉伸以填满整个网格容器，水平居中对齐（默认值）。
  • baseline：网格项按基线对齐。

如设置网格中的项目水平方向左对齐，可以这样设置，代码如下：

less 复制代码 
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-auto-rows: 50px;
  gap: 10px;
  justify-items: start;

效果如下：

如设置网格中的项目水平方向居中对齐，可以这样设置，代码如下：

less 复制代码 
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-auto-rows: 50px;
  gap: 10px;
  justify-items: center;

效果如下：

如设置网格中的项目水平方向左对齐，垂直方向居中对齐，可以这样设置，代码如下：

less 复制代码 
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
  grid-auto-rows: 50px;
  gap: 10px;
  place-items: center start;

效果如下：

（七）justify-content 属性、align-content 属性以及 place-content 属性

justify-content 是 CSS Grid 布局中的一个属性，用于控制网格容器中网格项的水平对齐方式。这个属性定义了网格项在网格容器的主轴（默认为水平方向）上的对齐方式。align-content属性用于控制垂直方向的对齐方式，place-content 是他们的缩写，他们的属性值都是一样的，下面是以justify-content为例演示属性值的区别。

justify-content 可以接受以下值：

  1. flex-start：网格项左对齐（默认值）。

  2. flex-end：网格项右对齐。

  3. center：网格项居中对齐。

  4. space-between：网格项平均分布在行或列上，第一个网格项与容器的起始边对齐，最后一个网格项与容器的结束边对齐。

  5. space-around：每个网格项两侧的间隔相等，网格项平均分布在行或列上。

  6. space-evenly：网格项之间的间隔相等，网格项平均分布在行或列上。

（七） grid-auto-columns 属性和 grid-auto-rows 属性

grid-auto-columns 属性在 CSS Grid 布局中用于控制自动创建的列的宽度。当网格容器的列数不是显式指定时，grid-auto-columns 属性允许您自动添加足够的列来放置网格项。

grid-auto-columns 可以接受以下几种类型的值：

  1. 固定宽度 ：您可以使用具体的长度值（如 200px 或 10em）来指定每列的宽度。
  2. 最大宽度 ：使用 max-content 值可以使列宽等于其网格项的最大宽度。
  3. 最小宽度 ：使用 min-content 值可以使列宽等于其网格项的最小宽度。
  4. 自动计算宽度 ：如果您不设置 grid-auto-columns 属性，或者将其设置为 auto，浏览器将根据网格项的内容自动计算列宽。

如果您不指定 grid-auto-columns 属性，或者将其设置为 auto，浏览器将根据网格项的内容自动计算列宽。这意味着每列的宽度将根据其网格项的实际内容来调整。

grid-auto-rows 属性是用于控制自动创建的列的高度，如下当我们只设置了第一列的高度，项目中的其他列高度，可以使用 grid-auto-rows 来指定。

代码如下：

less 复制代码 
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 10px;
  grid-template-rows: 100px;
  grid-auto-rows: 50px;

效果如下：

项目属性

（一）grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性

grid-column-start 是一个 CSS 属性，用于控制网格项在网格容器内的列网格线的起始位置。这个属性定义了网格项目的左边缘的开始。

grid-column-start 可以使用多种方式指定：

  1. 使用特定的网格线：通过指定一个网格线，可以确定网格项在网格内的位置。
  2. 使用 span 关键字：可以指定跨越多少个网格。
  3. 使用 auto 关键词：表明自动定位，自动跨度或者默认跨度为1。

此外，还可以使用 grid-column-end 属性来设置网格项的结束位置。这两个属性一起用于确定网格项在整个网格中的位置。

grid-column-end 属性、grid-row-start 属性以及 grid-row-end 属性用法与上面雷同。

例如：设置，网格中的第一个项目，从网格线的2位置开始，4位置结束，就可以如下，代码设置。

less 复制代码 
div{
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 10px;
  grid-auto-rows: 50px;

  .one {
    grid-column-start: 2;
    grid-column-end: 4;
  }
}

效果如下：

（二）justify-self 属性、align-self 属性以及 place-self 属性

justify-self 属性在 CSS Grid 布局中用于控制单个网格项的水平对齐方式。这个属性允许您覆盖网格容器的 justify-content 属性，以针对单个网格项进行更精确的对齐控制。

justify-self 可以接受以下值：

  • start：网格项左对齐。
  • end：网格项右对齐。
  • center：网格项居中对齐。
  • stretch：网格项拉伸以填满整个网格单元。

使用 justify-self 属性，您可以根据需要调整单个网格项的对齐方式，以实现更灵活和定制化的布局效果。这个属性对于需要特定对齐方式的单个网格项特别有用，可以与 align-self 属性一起使用来控制网格项在垂直方向上的对齐方式。

如设置如下代码：

less 复制代码 
 .one {
    justify-self: start;
  }
  .two {
    justify-self: center;
  }
  .three {
    justify-self: end;
  }

  .four {
    align-self: start;
  }
  .five {
    align-self: stretch;
  }
  .six {
    align-self: end;
  }

效果如下：

实现等分响应式

要求：实现等分响应式，容器居中对齐，项目之间的间距相等，项目可以随着浏览器窗口改变自动换行显示。

代码如下：

less 复制代码 
.container {
  display: grid;
  gap: 10px;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: center;
}

效果如下：

相关推荐
程序猿小D1 小时前
第二百六十七节 JPA教程 - JPA查询AND条件示例
java·开发语言·前端·数据库·windows·python·jpa
奔跑吧邓邓子1 小时前
npm包管理深度探索：从基础到进阶全面教程！
前端·npm·node.js
软件开发技术深度爱好者2 小时前
用HTML5+CSS+JavaScript庆祝国庆
javascript·css·html5
前端李易安2 小时前
ajax的原理，使用场景以及如何实现
前端·ajax·okhttp
杰哥在此2 小时前
Python知识点：如何使用Multiprocessing进行并行任务管理
linux·开发语言·python·面试·编程
汪子熙2 小时前
Angular 服务器端应用 ng-state tag 的作用介绍
前端·javascript·angular.js
Envyᥫᩣ2 小时前
《ASP.NET Web Forms 实现视频点赞功能的完整示例》
前端·asp.net·音视频·视频点赞
Мартин.6 小时前
[Meachines] [Easy] Sea WonderCMS-XSS-RCE+System Monitor 命令注入
前端·xss
昨天；明天。今天。8 小时前
案例-表白墙简单实现
前端·javascript·css
数云界8 小时前
如何在 DAX 中计算多个周期的移动平均线
java·服务器·前端
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04分享几个惊艳的 Three.js 个人站点05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache