一个 Grid 布局新手入门指南

前端

2024-01-08 17:08:19

Grid 布局 是当下最强大的CSS布局系统，它是一个二维布局，这意味着它可以处理列和行，不像 flexbox 主要是布局系统。Grid 布局的强大之处在于它允许您创建复杂、灵活的布局，这些布局可以响应不同屏幕尺寸和设备。

基本概念

容器（container） ：作为网格布局的父元素，它决定网格布局的位置和大小。

网格元素（grid item） ：它是网格布局的子元素，可以通过网格线放置在网格布局中。

行（row） ：水平方向上网格线之间的空间，每个网格元素都属于一个或多个行。

列（column） ：垂直方向上网格线之间的空间，每个网格元素都属于一个或多列。

创建网格布局

创建一个网格布局，需要先创建一个容器，并为容器设置display: grid属性。然后，您就可以使用grid-template-columns和grid-template-rows属性来定义网格布局的行和列。

添加网格元素

您可以使用grid-area属性将网格元素添加到网格布局中。grid-area属性可以指定网格元素在网格布局中所占的行和列。

网格间距

您可以使用grid-gap属性来设置网格元素之间的间距。grid-gap属性可以指定水平方向和垂直方向上的间距。

响应式布局

Grid 布局是响应式的，这意味着它可以在不同的屏幕尺寸和设备上正常工作。您可以使用媒体查询来改变网格布局在不同屏幕尺寸下的行为。

示例：

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

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

.grid-item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}
</style>