高级 CSS 网格技术

百变鹏仔 3个月前 (09-19) #CSS

文章标签网格

第 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;}

在此示例中：

2.网格自动放置

css 网格具有自动放置功能，可以在未显式放置网格项时自动定位网格项。您可以使用 grid-auto-flow 控制其工作方式。

立即学习“前端免费学习笔记（深入）”；

示例：

  .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));  }

在此示例中：

4.网格自动填充与自动调整

自动填充和自动调整都用于创建动态网格，但它们的工作方式略有不同：

  .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 非常适合控制单个项目内的对齐方式。您可以将两者结合起来处理布局的不同部分。

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;}

在此示例中：

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 上关注我

里多伊·哈桑

文章推荐

高级 CSS 网格技术

第 10 讲：高级 css 网格技术

1.网格区域

2.网格自动放置

3.使用 minmax() 函数

4.网格自动填充与自动调整

5.将 css 网格与 flexbox 相结合

6.隐式网格与显式网格

7.创建全页网格布局

练习运动

在 linkedin 上关注我

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写