第 10 讲：高级 css 网格技术
欢迎来到《从基础到辉煌》课程第十讲。在本次讲座中，我们将深入研究高级 css 网格技术。这些技术将使您能够创建更复杂和响应更快的布局。在本讲座结束时，您将能够使用网格区域、网格自动放置，并将 css 网格与 flexbox 等其他布局系统结合起来。
1.网格区域
网格区域允许您为网格的各个部分指定名称，从而更轻松地管理和可视化布局。
- 示例：为带有页眉、侧边栏、内容和页脚的布局命名网格区域。
html:
<div class="grid-container"> <header class="header">header</header> <aside class="sidebar">sidebar</aside> <main class="content">main content</main> <footer class="footer">footer</footer> </div>
css:
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
在此示例中：
- 网格区域：grid-template-areas 属性定义了一个包含三个部分的布局：跨越两列的标题、中间的侧边栏和主要内容以及页脚。
- 通过将网格项（标题、侧边栏等）分配给特定区域，您可以更有效地控制布局。
2.网格自动放置
css 网格具有自动放置功能，可以在未显式放置网格项时自动定位网格项。您可以使用 grid-auto-flow 控制其工作方式。
立即学习“前端免费学习笔记（深入）”；
-
价值观：
- row：项目逐行放置（默认）。
- 列：项目按列放置。
- 密集：项目将被打包到网格中的空白空间中。
示例：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* auto-places items and packs them densely */
}
在这种情况下，网格项目将逐行放置，较小的项目将填充任何间隙。
3.使用 minmax() 函数
minmax() 函数允许您定义网格轨道的范围，例如指定网格轨道可以采用的最小和最大尺寸。
- 示例：
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr));
}
在此示例中：
- 网格有三列。
- 每列至少有 150 像素宽，但可以增长以填充可用空间 (1fr)。
4.网格自动填充与自动调整
自动填充和自动调整都用于创建动态网格，但它们的工作方式略有不同：
- 自动填充：添加尽可能多的列，即使它们是空的。
自动调整：缩小或增大列以适应可用空间。
示例：自动调整和自动填充比较。
乐彼多用户商城系统LBMall(.net)下载乐彼多用户商城系统，采用ASP.NET分层技术和AJAX技术，运营于高速稳定的微软.NET+MSSQL 2005平台；完全具备搭建超大型网络购物多用户网上商城的整体技术框架和应用层次LBMall 秉承乐彼软件优秀品质，后台人性化设计，管理窗口识别客户端分辨率自动调整，独立配置的菜单操作锁，使管理操作简单便捷。待办事项1、新订单、支付、付款、短信提醒2、每5分钟自动读取3、新事项声音提醒 店铺管理1
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* auto-fill */
}
.grid-container-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* auto-fit */
}
两个选项都会根据可用空间自动调整列数，但自动调整会折叠空列。
5.将 css 网格与 flexbox 相结合
虽然 css grid 非常适合构建整体布局，但 flexbox 非常适合控制单个项目内的对齐方式。您可以将两者结合起来处理布局的不同部分。
- 示例：使用 css grid 作为主布局，并使用 flexbox 来对齐网格项内的内容。
html:
<div class="grid-container">
<div class="header">header</div>
<div class="content">
<div class="flexbox-item">item 1</div>
<div class="flexbox-item">item 2</div>
</div>
<div class="footer">footer</div>
</div>
css:
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
}
.content {
display: flex;
justify-content: space-around;
align-items: center;
}
.flexbox-item {
padding: 20px;
background-color: #ddd;
}
在此示例中：
- 网格布局：整体布局采用 css 网格结构，包含页眉、内容和页脚。
- flexbox：内容部分使用 flexbox 来对齐其中的项目。
6.隐式网格与显式网格
网格可以显式定义（使用 grid-template-columns 和 grid-template-rows）或隐式定义（自动创建新轨道）。
- 显式网格：您定义行数和列数。
隐式网格：网格自动创建行或列以容纳额外的项目。
示例：
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-rows: 50px; /* implicitly adds rows */
}
在这种情况下，如果添加的项目数量超出了定义的列，网格将自动创建新行。
7.创建全页网格布局
让我们使用 css grid 创建一个带有页眉、主要内容区域、侧边栏和页脚的响应式全页布局。
html:
<div class="grid-container"> <header class="header">header</header> <nav class="sidebar">sidebar</nav> <main class="main-content">main content</main> <footer class="footer">footer</footer> </div>
css:
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh; /* Full height layout */
}
.header {
grid-area: header;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #f4f4f4;
padding: 20px;
}
.main-content {
grid-area: main;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
在此示例中：
- 网格区域：布局由标题、侧边栏、主要内容和页脚组成。
- 网格自动调整每个部分的高度，填充整个视口高度。
练习运动
- 使用 css 网格创建带有标题、侧边栏、主要内容和页脚的响应式博客布局。
- 使用 grid-template-areas 定义结构。
- 通过调整不同屏幕尺寸上的列数来使布局响应。
下一步： 在下一课中，我们将探索 css 定位 以及如何使用绝对、相对和固定等属性来定位元素。准备好进一步增强您的布局控制！
在 linkedin 上关注我
里多伊·哈桑
