让你彻底理解Grid布局，做个前端大牛🌟

前端

2023-11-12 03:56:13

解锁Web布局的强大功能：掌握Grid布局

前端开发人员在布局方面经常面临挑战，而Grid布局的出现改变了这一切。它提供了直观的网格系统，使创建复杂且响应式的布局变得轻而易举。

Grid布局的核心概念

Grid布局基于网格系统，将页面划分为行和列。你可以定义网格容器的列和行布局，并通过控制网格子项的属性来确定元素在网格中的位置和大小。

网格容器属性

display: grid;: 将元素转换为网格容器
grid-template-columns: 定义列布局
grid-template-rows: 定义行布局
grid-gap: 设置网格单元之间的间隙

网格子项属性

grid-column: 指定子项占据的列范围
grid-row: 指定子项占据的行范围
grid-column-start: 指定子项起始的列
grid-column-end: 指定子项结束的列
grid-row-start: 指定子项起始的行
grid-row-end: 指定子项结束的行

隐式网格

当未显式定义网格结构时，浏览器将自动创建隐式网格。隐式网格的行为与显式网格类似，但列和行的大小由浏览器根据可用空间和子项内容进行计算。

repeat()函数和minmax()函数

repeat()函数允许你在网格中重复定义列或行。
minmax()函数用于定义列或行的最小和最大宽度或高度。

Grid布局的应用案例

多列布局
网格画廊
响应式布局
复杂布局

代码示例

<div class="grid-container">
  <div class="header">标题</div>
  <div class="main-content">
    <div class="article">文章</div>
    <div class="sidebar">侧边栏</div>
  </div>
  <div class="footer">页脚</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
}

.header {
  grid-column: 1 / 3;
}

.main-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.article {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.sidebar {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.footer {
  grid-column: 1 / 3;
}