登录
首页 >  文章 >  前端

高级 CSS 网格技术

来源:dev.to

时间:2024-09-09 15:37:04 425浏览 收藏

一分耕耘,一分收获!既然都打开这篇《高级 CSS 网格技术》,就坚持看下去,学下去吧!本文主要会给大家讲到等等知识点,如果大家对本文有好的建议或者看到有不足之处,非常欢迎大家积极提出!在后续文章我会继续更新文章相关的内容,希望对大家都有所帮助!

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

在此示例中:

  • 网格区域: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.网格自动填充与自动调整

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

  • 自动填充:添加尽可能多的列,即使它们是空的。
  • 自动调整:缩小或增大列以适应可用空间。

  • 示例:自动调整和自动填充比较。

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

在此示例中:

  • 网格区域:布局由标题、侧边栏、主要内容和页脚组成。
  • 网格自动调整每个部分的高度,填充整个视口高度。

练习运动

  1. 使用 css 网格创建带有标题、侧边栏、主要内容和页脚的响应式博客布局。
  2. 使用 grid-template-areas 定义结构。
  3. 通过调整不同屏幕尺寸上的列数来使布局响应。

下一步: 在下一课中,我们将探索 css 定位 以及如何使用绝对、相对和固定等属性来定位元素。准备好进一步增强您的布局控制!


在 linkedin 上关注我

里多伊·哈桑

到这里,我们也就讲完了《高级 CSS 网格技术》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!

声明:本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>