内行才知道，原来记不住就回来看看的display: grid布局教程这么简单！

2022-12-21 13:46:02

CSS Grid布局：打造响应式且灵活的网站布局

在网页设计中，布局是至关重要的。它决定了用户如何与您的网站互动以及他们如何感知您的品牌。随着设备和屏幕尺寸的多样化，创建跨平台一致的布局变得至关重要。CSS Grid布局应运而生，为我们提供了创建复杂且响应式布局的强大工具。

1. CSS Grid布局的基础

CSS Grid布局是一种基于网格的布局系统。它将容器划分为均匀的网格单元格，允许您轻松地放置和定位元素。通过指定网格的列数和行数，您可以创建所需大小和形状的布局。

代码示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .item {
    border: 1px solid black;
    padding: 10px;
  }
</style>

在这个示例中，容器被划分为一个2列2行的网格。元素被放置在网格单元格中，并且元素的大小由 grid-template-columns 和 grid-template-rows 属性指定。

2. grid-gap 属性

grid-gap 属性允许您在网格单元格之间添加间距。这可以帮助您创建更美观、更易于阅读的布局。间距的单位可以是像素、百分比或任何其他 CSS 单位。

代码示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 10px;
  }

  .item {
    border: 1px solid black;
    padding: 10px;
  }
</style>

在这个示例中，网格单元格之间添加了 10 像素的间距。

3. justify-content 和 align-items 属性

justify-content 和 align-items 属性用于控制网格容器中元素的对齐方式。justify-content 控制元素在水平方向上的对齐方式，而 align-items 控制元素在垂直方向上的对齐方式。

代码示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
  }

  .item {
    border: 1px solid black;
    padding: 10px;
  }
</style>

在这个示例中，元素在网格容器中水平和垂直居中。

4. grid-template-areas 属性

grid-template-areas 属性允许您定义网格单元格的区域。区域可以是任意形状，但必须是矩形。这使您可以创建更复杂和结构化的布局。

代码示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

<style>
  .container {
    display: grid;
    grid-template-areas:
      "header header"
      "main sidebar";
  }

  .header {
    grid-area: header;
  }

  .main {
    grid-area: main;
  }

  .sidebar {
    grid-area: sidebar;
  }

  .item {
    border: 1px solid black;
    padding: 10px;
  }
</style>