曾 俊

曾 俊

1656700800

如何在CSS中使用 子网格和容器查询

如果您经常使用 CSS,您可能会遇到并排放置的布局在一侧的大小发生变化时会中断或错位。几乎每个网页设计师都面临过这个问题,解决起来可能会令人沮丧。幸运的是,CSS 具有允许您创建在内容更改时保持对齐的 Web 布局的功能;这些被称为子网格和容器查询。

CSS 子网格和容器查询是可以极大地改进网页布局设计和响应式网页开发的两个功能。本文将深入探讨 CSS 子网格,提供有关将它们与容器查询无缝结合使用的教程。

什么是 CSS 子网格?

CSS 子网格是 CSS 生态系统中一个相对较新的特性,被证明是对二级 CSS 网格网页设计和布局规范的重要补充。

您在传统网格容器中构建和调整的元素(子组件)不会直接从其父组件继承行和列。这会导致难以始终将它们与父网格对齐,因为每个元素都倾向于独立运行。

然后,您必须管理两个独立的网格,这可能会变得多余。您可以通过将和属性添加subgrid为值来快速解决此问题,因为网格子组件现在可以与其父组件完美同步。grid-template-rowsgrid-template-columns

CSS 子网格允许子组件继承其父行和列设置,而无需维护其网格设置。

考虑下面嵌套网格系统中的三张卡片:

嵌套网格系统中的卡片

看看当你在中心增加卡片内容时会发生什么:

嵌套网格卡增加了中心内容

 

随着内容的增加,您可以立即看到标题和页脚位置受到影响。

有几种方法可以处理这个问题。尽管如此,它们最终都会让您手动管理嵌套网格系统中的单个网格,这在处理更大的代码库时可能会出现问题。

子网格现在提供了一种替代修复,允许行和列在更改其内容的情况下保持其在网格系统中的初始位置。

从我上面的示例中,添加subgrid为我的卡片grid-template-rows 的值将产生不同的输出:

.card {
  grid-template-rows: subgrid;
}

结果如下:

子网格卡

尽管第二张卡片的内容有所增加,但标题和页脚元素仍然完美定位并与父网格同步。

子网格是 CSS 网格布局规范的重要补充,因为子组件能够继承其父组件和祖父组件的属性。在构建嵌套网格系统、完美对齐的表单布局和其他编辑网络对齐时,它会派上用场。

目前只有 Firefox 浏览器支持 CSS subgrid,其他流行的浏览器也不甘落后。您可以参考本指南以深入了解 CSS 子网格及其功能。

什么是容器查询?

自从将媒体查询引入浏览器以来,响应式网页设计向未来迈出了一大步,因为您现在可以为浏览器视口设计特定的布局。

这很好,但媒体查询在创建更复杂的 Web 结构时也暴露了冗余问题。例如,包含在包含部分中的组件需要调整其主要布局属性(如宽度或高度)以与网页视口的变化保持一致,这可能会影响和破坏设计。

要解决此问题,请保持组件的媒体查询与包含部分同步,以确保您的组件在所有视口大小上看起来都不错。您可以使用容器查询轻​​松解决此问题,因为您现在可以根据实际属性设计元素,而不是视口大小。容器查询允许任何组件根据指定的容器进行响应。

例如,在网格系统中,子组件可以与其容器对齐并确定它们的行为和响应能力。您可以根据它们在容器(而不是视口)中的位置来修改它们的样式。虽然您仍然可以使用响应式网格布局来构建网页,但使用容器查询是一种更直接的响应式网页设计方法。

容器查询如何工作?

关于 CSS 容器查询,首先要了解的是,虽然“容器”是被查询的元素,但容器查询中的规则只影响容器的后代。例如,如果您查询 a mainsection或 adiv作为目标容器,则容器查询将允许您定义其中的元素如何随着容器大小的变化而变化的规则。

您可以使用@container. 它寻找最近的包含上下文:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

上面的代码是使用容器查询的说明。它只是指示浏览器将卡片flex-direction列的值更改row为容器的宽度是否至少为 450 像素。

容器查询被指定包含在CSS containment. 伴随着三个属性:

1.container-type

此属性将查询容器分配给元素,以便其子组件可以查询其布局功能的多个方面。

  • size为块和内联轴维度查询创建查询容器。布局、样式和大小包含应用于元素
  • inline-size为容器的内联轴上的维度查询创建一个查询容器。应用了元素的布局、样式和行内大小包含
  • block-size为容器的块轴上的维度查询创建一个查询容器。布局、样式和块大小包含应用于元素
  • style用于样式查询,并创建一个查询容器
  • state为状态查询创建查询容器

2.container-name

进一步指定容器名称的可选属性。当我们不想以最近的父容器为目标时,此属性充当逃生舱口。

考虑下面的代码:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

sidebar上面的CSS生成了一个具有指定名称(然后,您可以像这样查询该特定容器container-name

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

此属性通常用作速记属性,可用于在一个语句中container-type同时设置。container-name

容器查询的用例

容器查询适用于高度可重用的组件,其布局取决于可用容器空间。它们可以在各种情况下使用,也可以添加到页面上的多个容器中。

其他容器查询用例包括:

  • 适应性布局
  • 卡片、表单元素、横幅和其他模块化组件
  • CSS 调整大小实验
  • 具有不同功能的移动和桌面分页

大多数浏览器仍然不支持容器查询,但您可以在 Google Chrome Canary 上轻松测试它们的功能。前往chrome://flags并启用CSS Container Queries

启用 css 容器查询

您还可以通过以下方式在 Mozilla Firefox 上试验容器查询about:config并启用layout.css.container-queries

启用容器查询 Firefox

容器查询目前处于他们的第一个公开工作草案中,但该功能已被证明很有用,并且很可能被合并到所有浏览器版本中。

将 CSS 子网格与容器查询一起使用

CSS 子网格和容器查询是两个引人入胜的 CSS 功能,我认为它们会改变您对网页布局设计和响应式样式的方法,但是我们如何将它们结合起来呢?

假设我们有一个部分包含以下格式的三篇文章:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

现在让我们将这些文章放在嵌套网格系统中,子网格和容器查询可以在其中发挥作用:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

从上面的 CSS 代码中,我们使前两列在两列网格系统中占用的空间与下面的第三列一样多。然后我们在文章内部创建了一个子网格,以确保里面的元素是同步的并且不会中断,即使文章的内容增加了。

示例卡片网格系统

为了使这个系统更具响应性,我们必须针对该部分并设置一些容器查询规则,这些规则将应用于文章作为其后代。您可能注意到我们查询了inline-size节的属性,因为我们希望文章(子)组件随着节(容器)的宽度内联地增长或缩小。

在这种情况下,当节的宽度最大为 时,我们使文章在列方向上弯曲80ch。这使我们的文章不响应视口大小而是响应容器的宽度。

结果如下:

容器查询子网格一起工作

结论

本文介绍了 CSS 子网格和容器查询、它们的工作原理和用例。我们还能够试验这两个概念并将它们结合起来以实现响应式布局。容器查询和 CSS 子网格目前处于他们的第一个公开工作草案中,但它们已被证明是有用的,并且很可能被合并到大多数新的浏览器版本中。

我希望这篇文章对你有价值。快乐编码!

来源:https ://blog.logrocket.com/using-css-subgrids-container-queries/

#css 

What is GEEK

Buddha Community

如何在CSS中使用 子网格和容器查询
曾 俊

曾 俊

1656700800

如何在CSS中使用 子网格和容器查询

如果您经常使用 CSS,您可能会遇到并排放置的布局在一侧的大小发生变化时会中断或错位。几乎每个网页设计师都面临过这个问题,解决起来可能会令人沮丧。幸运的是,CSS 具有允许您创建在内容更改时保持对齐的 Web 布局的功能;这些被称为子网格和容器查询。

CSS 子网格和容器查询是可以极大地改进网页布局设计和响应式网页开发的两个功能。本文将深入探讨 CSS 子网格,提供有关将它们与容器查询无缝结合使用的教程。

什么是 CSS 子网格?

CSS 子网格是 CSS 生态系统中一个相对较新的特性,被证明是对二级 CSS 网格网页设计和布局规范的重要补充。

您在传统网格容器中构建和调整的元素(子组件)不会直接从其父组件继承行和列。这会导致难以始终将它们与父网格对齐,因为每个元素都倾向于独立运行。

然后,您必须管理两个独立的网格,这可能会变得多余。您可以通过将和属性添加subgrid为值来快速解决此问题,因为网格子组件现在可以与其父组件完美同步。grid-template-rowsgrid-template-columns

CSS 子网格允许子组件继承其父行和列设置,而无需维护其网格设置。

考虑下面嵌套网格系统中的三张卡片:

嵌套网格系统中的卡片

看看当你在中心增加卡片内容时会发生什么:

嵌套网格卡增加了中心内容

 

随着内容的增加,您可以立即看到标题和页脚位置受到影响。

有几种方法可以处理这个问题。尽管如此,它们最终都会让您手动管理嵌套网格系统中的单个网格,这在处理更大的代码库时可能会出现问题。

子网格现在提供了一种替代修复,允许行和列在更改其内容的情况下保持其在网格系统中的初始位置。

从我上面的示例中,添加subgrid为我的卡片grid-template-rows 的值将产生不同的输出:

.card {
  grid-template-rows: subgrid;
}

结果如下:

子网格卡

尽管第二张卡片的内容有所增加,但标题和页脚元素仍然完美定位并与父网格同步。

子网格是 CSS 网格布局规范的重要补充,因为子组件能够继承其父组件和祖父组件的属性。在构建嵌套网格系统、完美对齐的表单布局和其他编辑网络对齐时,它会派上用场。

目前只有 Firefox 浏览器支持 CSS subgrid,其他流行的浏览器也不甘落后。您可以参考本指南以深入了解 CSS 子网格及其功能。

什么是容器查询?

自从将媒体查询引入浏览器以来,响应式网页设计向未来迈出了一大步,因为您现在可以为浏览器视口设计特定的布局。

这很好,但媒体查询在创建更复杂的 Web 结构时也暴露了冗余问题。例如,包含在包含部分中的组件需要调整其主要布局属性(如宽度或高度)以与网页视口的变化保持一致,这可能会影响和破坏设计。

要解决此问题,请保持组件的媒体查询与包含部分同步,以确保您的组件在所有视口大小上看起来都不错。您可以使用容器查询轻​​松解决此问题,因为您现在可以根据实际属性设计元素,而不是视口大小。容器查询允许任何组件根据指定的容器进行响应。

例如,在网格系统中,子组件可以与其容器对齐并确定它们的行为和响应能力。您可以根据它们在容器(而不是视口)中的位置来修改它们的样式。虽然您仍然可以使用响应式网格布局来构建网页,但使用容器查询是一种更直接的响应式网页设计方法。

容器查询如何工作?

关于 CSS 容器查询,首先要了解的是,虽然“容器”是被查询的元素,但容器查询中的规则只影响容器的后代。例如,如果您查询 a mainsection或 adiv作为目标容器,则容器查询将允许您定义其中的元素如何随着容器大小的变化而变化的规则。

您可以使用@container. 它寻找最近的包含上下文:

.card {
  display: flex;
  flex-direction: column;
}

.container {
  background: #fff;
  container-type: layout inline-size
  container-name: something;
}

@container something (min-width: 450px) {
  .card {
    display: flex;
    flex-direction: row
  }
}

上面的代码是使用容器查询的说明。它只是指示浏览器将卡片flex-direction列的值更改row为容器的宽度是否至少为 450 像素。

容器查询被指定包含在CSS containment. 伴随着三个属性:

1.container-type

此属性将查询容器分配给元素,以便其子组件可以查询其布局功能的多个方面。

  • size为块和内联轴维度查询创建查询容器。布局、样式和大小包含应用于元素
  • inline-size为容器的内联轴上的维度查询创建一个查询容器。应用了元素的布局、样式和行内大小包含
  • block-size为容器的块轴上的维度查询创建一个查询容器。布局、样式和块大小包含应用于元素
  • style用于样式查询,并创建一个查询容器
  • state为状态查询创建查询容器

2.container-name

进一步指定容器名称的可选属性。当我们不想以最近的父容器为目标时,此属性充当逃生舱口。

考虑下面的代码:

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

sidebar上面的CSS生成了一个具有指定名称(然后,您可以像这样查询该特定容器container-name

@container sidebar (min-width: 450px){
  .card {
    display: flex;
    flex-direction: row
  }
}

3.container

此属性通常用作速记属性,可用于在一个语句中container-type同时设置。container-name

容器查询的用例

容器查询适用于高度可重用的组件,其布局取决于可用容器空间。它们可以在各种情况下使用,也可以添加到页面上的多个容器中。

其他容器查询用例包括:

  • 适应性布局
  • 卡片、表单元素、横幅和其他模块化组件
  • CSS 调整大小实验
  • 具有不同功能的移动和桌面分页

大多数浏览器仍然不支持容器查询,但您可以在 Google Chrome Canary 上轻松测试它们的功能。前往chrome://flags并启用CSS Container Queries

启用 css 容器查询

您还可以通过以下方式在 Mozilla Firefox 上试验容器查询about:config并启用layout.css.container-queries

启用容器查询 Firefox

容器查询目前处于他们的第一个公开工作草案中,但该功能已被证明很有用,并且很可能被合并到所有浏览器版本中。

将 CSS 子网格与容器查询一起使用

CSS 子网格和容器查询是两个引人入胜的 CSS 功能,我认为它们会改变您对网页布局设计和响应式样式的方法,但是我们如何将它们结合起来呢?

假设我们有一个部分包含以下格式的三篇文章:

<section class="container">
  <article class="article1">...</article>
  <article class="article2">...</article>
  <article class="article3">...</article>
</section>

现在让我们将这些文章放在嵌套网格系统中,子网格和容器查询可以在其中发挥作用:

/* this creates a container with containment on the inline axis only and gives it an optional name "main" */
html, section {
  container-type: inline-size;
  container-name: main;
}

/* targeting the section's minimum width at "60ch" */
@container main (min-width: 60ch) {
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* targeting the section's minimum width at "100ch" */
@container main (min-width: 100ch) {
  article {
    padding: 1rem;
    font-size: 1rem;
    border: 1px solid #000;
    margin: 10px 20px;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* enabling a more responsive grid layout so elements don't break */
  .article1, .article2 {
    grid-template-columns: subgrid;
  }

  .article3 {
    display: grid;
    grid-column: span 2;
  }
}

/* targeting the section's containment context at a maximum width of "100ch" */
@container main (max-width: 100ch) {
  main {
    display: flex;
    flex-direction: column;
  }
}

从上面的 CSS 代码中,我们使前两列在两列网格系统中占用的空间与下面的第三列一样多。然后我们在文章内部创建了一个子网格,以确保里面的元素是同步的并且不会中断,即使文章的内容增加了。

示例卡片网格系统

为了使这个系统更具响应性,我们必须针对该部分并设置一些容器查询规则,这些规则将应用于文章作为其后代。您可能注意到我们查询了inline-size节的属性,因为我们希望文章(子)组件随着节(容器)的宽度内联地增长或缩小。

在这种情况下,当节的宽度最大为 时,我们使文章在列方向上弯曲80ch。这使我们的文章不响应视口大小而是响应容器的宽度。

结果如下:

容器查询子网格一起工作

结论

本文介绍了 CSS 子网格和容器查询、它们的工作原理和用例。我们还能够试验这两个概念并将它们结合起来以实现响应式布局。容器查询和 CSS 子网格目前处于他们的第一个公开工作草案中,但它们已被证明是有用的,并且很可能被合并到大多数新的浏览器版本中。

我希望这篇文章对你有价值。快乐编码!

来源:https ://blog.logrocket.com/using-css-subgrids-container-queries/

#css