CSS3网格布局

CSS网格布局（CSS Grid）是CSS中一个强大的布局系统，它允许您在二维平面上对元素进行布局和定位。与传统的CSS布局方式相比，网格布局提供了更加强大和灵活的工具，使您能够创建复杂的网页布局。

在内容开始之前，先展示一个 css grid网格布局的实例：

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 100px 50px 100px;
    grid-gap: 10px;
    background-color: DeepSkyBlue;
    padding: 10px;
}
.item {
    padding: 10px;
    background-color: SandyBrown;
    text-align: center;
}

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

一、CSS网格的基本概念

CSS网格布局将页面划分为两个主要区域：行和列。您可以将元素放置在网格中的任何位置，并根据需要定义行和列的数量、大小和间距。

二、创建网格容器

要使用CSS网格布局，您需要将一个元素设置为网格容器。这可以通过将display属性设置为grid来实现：

.container {
  display: grid;
}

这将使.container元素成为一个网格容器，其子元素将成为网格项（grid items）。

三、定义网格线

网格由一系列水平和垂直线组成。您可以使用grid-template-columns和grid-template-rows属性来定义这些线。例如：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
  grid-template-rows: 100px 200px; /* 两行，第一行100px，第二行200px */
  grid-gap: 10px;
  background-color: DeepSkyBlue;
  padding: 10px;
}
.item {
    padding: 10px;
    background-color: SandyBrown;
    text-align: center;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

在这个例子中，我们定义了一个3列等宽和2行不同高的网格。

四、放置网格项

要将元素放置在网格中的特定位置，您可以使用grid-column-start、grid-column-end、grid-row-start和grid-row-end属性。这些属性允许您精确控制元素在网格中的位置。例如：

grid-column-start 实例

.container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 10px;
    background-color: DeepSkyBlue;
    padding: 10px;
}
.container > div {
    padding: 10px;
    background-color: SandyBrown;
    text-align: center;
}
.item1 {
    grid-column-start: 2;
}

<div class="container">
    <div class="item1">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

综合实例

.container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 10px;
    background-color: DeepSkyBlue;
    padding: 10px;
}
.item {
    padding: 10px;
    background-color: SandyBrown;
    text-align: center;
}
.item.item1 {
  grid-row-start: 3;
  grid-column-start: 2;
}

<div class="container">
    <div class="item item1">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

在这个例子中，.item1元素将从第3行第2列开始。

五、其他常用的CSS网格属性

• grid-auto-rows和grid-auto-columns: 自动创建行和列。
• grid-gap: 设置网格项之间的间距。
• grid-template: 用于简写设置grid-template-columns和grid-template-rows。
• place-items: 控制网格项的对齐方式。
• repeat(): 用于重复定义网格的行或列。
• fr: 一个常用于定义灵活宽度的单位。例如，1fr表示一个网格单元的宽度或高度。
• auto: 让浏览器自动计算宽度或高度。
• minmax(): 用于定义最小和最大宽度或高度。例如，minmax(100px, 1fr)表示宽度或高度至少为100px，但不超过一个网格单元的宽度或高度。
• justify-items, align-items, justify-content, align-content: 控制网格项的对齐方式。例如，justify-items: center;会使所有网格项在容器中水平居中。
• place-content: 用于简写设置justify-content和align-content。
• auto-fill 和 auto-fit: 当使用 repeat() 函数时，这两个值会自动填充或适应重复的项，而不管实际的可用空间大小。例如，repeat(auto-fill, 100px)会尽可能多地填充100px的列，而不管可用空间的大小。

本文地址：https://www.tides.cn/p_docs-css3-grid