引言
CSS Grid 布局是用于网页布局的新标准，通过将网格分隔成多行和多列来控制网页上的不同元素的布局，能够实现各种不同的布局效果。相较于传统的布局方式，CSS Grid 布局更加直观、灵活、易于维护和扩展。
本篇文章将详细介绍 CSS Grid 布局的基本概念和用法，以及通过示例代码演示如何实现各种常见布局，旨在帮助前端开发人员更好地利用 CSS Grid 布局构建具有一致性和灵活性的网页布局.
基本概念
网格容器
网格容器是指将 grid 声明为 display 的元素，它是网格所有项的父元素。网格容器里的所有直接子元素都是网格项。
.container {
display: grid;
}网格项
网格项是指网格容器的子元素，即位于网格内的元素。网格项可以被放置在网格内的任何位置，并可以跨越多个行和列。
<div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- ---- ------------------- ---- ----- - ----- - ----------------- ----- -------- ----- ------- --- ----- ----- -
网格行和网格列
网格行和网格列组成了网格，它们是通过 grid-template-columns 和 grid-template-rows 属性来定义的。grid-template-columns 定义列的大小和数量，grid-template-rows 定义行的大小和数量。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}网格线
网格线是用于定义网格行和网格列的线，它们可以是水平的也可以是竖直的。可以通过 grid-column 和 grid-row 来指定网格项所在的行和列，也可以通过 grid-column-start 和 grid-column-end 以及 grid-row-start 和 grid-row-end 来指定网格项跨越的行和列。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- ---- ------------------- ---- ----- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- - ------- - ------------ - - -- --------- - - -- -
实现各类常见布局
等宽等高布局
在等宽等高布局中，网格容器中的所有网格项具有相同的宽度和高度，并根据网格行和网格列来按顺序排列。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}两列布局
在两列布局中，网格容器中的网格项分为两列，第一列宽度为 1fr，第二列宽度为 2fr。
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}三列布局
在三列布局中，网格容器中的网格项分为三列，第一列宽度为 1fr，第二列宽度为2fr，第三列宽度为 3fr。
.container {
display: grid;
grid-template-columns: 1fr 2fr 3fr;
}九宫格布局
在九宫格布局中，网格容器中的网格项分为九个，其中第一行为 1fr、1fr、1fr，第二行为 2fr、1fr、1fr，第三行为 2fr、2fr、1fr。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- --- --- ---- - ------- - ------------ - - -- --------- - - -- - -- ---------- --
网页头部、菜单和内容区域布局
在网页头部、菜单和内容区域布局中，网格容器分为三个行，第一行为网页头部，第二行为菜单，第三行为内容区域。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ---- ------------------- ---- ---- ---- - ------- - --------- - - -- - ----- - --------- - - -- - -------- - --------- - - -- -
圣杯布局
圣杯布局是一种流行的三列布局，包含一个主要内容区域和两个边栏。通过使用左右浮动和负边距，可以实现这种布局。
<div class="container"> <div class="main">Main Content</div> <div class="left-sidebar">Left Sidebar</div> <div class="right-sidebar">Right Sidebar</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- ----- --- ------ - ----- - ------------ - - -- - ------------- - ------------ - - -- ------------- ------- - -------------- - ------------ - - -- ------------ ------- -
总结
CSS Grid 布局是一个非常强大的工具，可以帮助前端开发人员更轻松地实现复杂的网页布局。本篇文章介绍了 CSS Grid 布局的基本概念和用法，并通过实例代码演示了如何实现各种常见布局。希望本文能为你提供有价值的学习参考和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cfc047b5eee0b5256e8f2b