CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)-CSS 튜토리얼-php.cn

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

(권장 튜토리얼: CSS Tutorial)

그리드 레이아웃은 최신 CSS의 가장 강력한 기능 중 하나입니다. 그리드 레이아웃을 사용하면 외부 UI 프레임워크 없이 복잡하고 빠른 레이아웃을 구축하는 데 도움이 됩니다. 이 글에서는 CSS 그리드에 대해 알아야 할 모든 것을 다룰 것입니다.

CSS 그리드에 대한 기본 지식

아래와 같이 코드로 직접 이동하여 먼저 태그를 작성하세요. 소스 코드는 다음 링크에 있습니다: https://codepen.io/Shadid/pen/zYqNvgv

<p>
  <header>Header</header>
  <aside>Aside 1</aside>
  <section>Section</section>
  <aside>Aside 2</aside>
  <footer>Footer</footer>
</p>

로그인 후 복사

On 위에서 header, 두 개의 aside 및 footer 요소를 생성하고 이를 container 요소에 래핑합니다. 컨테이너 요소 내의 모든 요소에 배경색과 글꼴 크기를 추가합니다. header、两个aside和一个footer元素，并将它们包装在一个container 元素中。我们为容器元素中的所有元素添加背景色和字体大小。

.container > * {
  background: aquamarine;
  font-size: 30px;
}

로그인 후 복사

运行的网页如下：

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

现在我们添加一些网格属性：

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"
}

/* Assign grid areas to elements */
header {
  grid-area: header;
}

aside:nth-of-type(1) {
  grid-area: aside-1;
}

aside:nth-of-type(2) {
  grid-area: aside-2;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

로그인 후 복사

首先，我们定义了display:grid，它将启用网格布局，然后我们使用grid-gap在网格元素中增加间隙。

接下来，我们为每个html元素分配了一个网格区域名称。在container 类中，我们可以使用grid-template-areas`属性定义html 模板的外观，注意网格模板区域是如何排列的。

grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"

로그인 후 복사

元素的顺序与 dom 结构不同。但是，最终按我们网络区域的顺序来展示。

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

下一步是使我们的页面具有响应性。我们希望在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。看下面代码：

@media (min-width: 670px) {
  .container {
    grid-template-areas: 
      "header  header  header"
      "aside-1 section  aside-2"
      "footer    footer    footer"
  }
}

로그인 후 복사

我们所要做的就是在媒体查询中重新排序网格模板区域。

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

网格列和行

如何使用 CSS 网格来组织列和？先从下面的代码开始：

<p>
  </p><p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>

로그인 후 복사

添加一些基本的 css

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
}

.item {
  background: lightcoral;
}

로그인 후 복사

我们为上面的 dom 结构使用了网格布局，并使用grid-gap增加了风格之间的间距。现在，我们使用grid-template-columns属性来添加一些列。

.container {
    display: grid;
    height: 100vh;
    grid-gap: 10px;
    grid-template-columns: 100px 200px auto auto;
}

로그인 후 복사

就像这样，我们使用了列。我们指定第一列为100px，第二列为200px。由于我们在第3列和第4列中应用了auto，因此剩余的屏幕长度将在其中分成两半。

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

可以看到现在页面中有一个空白。如果我想将第六列移至第三列和第四列怎么办？为此，我们可以使用grid-column-start和grid-column-end属性。

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: 5;
}

로그인 후 복사

注意，我们使用grid-column-end: 5，值5指向列线。第四列在网格的第五行结束。 grid-column-start和grid-column-end值是指网格线。

如果你觉得网格线的值让人困惑，你也可以使用span，下面的效果与上面一样：

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: span 2;
}

로그인 후 복사

对于span 2，指定p占用网格中的两个插槽。现在，假设要扩展第二列填充下面的空白区域。我们也可以通过grid-column-start属性轻松地做到这一点。

.item:nth-of-type(2) {
  grid-row-start: span 2;
}

로그인 후 복사

我们使用span和grid-row-start来指定我们想要占据两个插槽。

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

如上所见，我们已经能够使用少量的CSS网格属性来构建非常复杂的布局。

有效地使用 grid-templates

现在来看看grid-templates，在本节中，我们将讨论如何为不同的屏幕大小创建不同的布局。

首先，还是先来一段 dom 结构：

<p>
  <header>header</header>
  <aside>Left</aside>
  <section>Section</section>
  <aside>Right</aside>
  <footer>Footer</footer>
</p>

로그인 후 복사

接着，添加一些样式：

``
.container {
 display: grid;
 height: 100vh;
 grid-gap: 10px;
}
.container > * {
 background: coral;
 display: flex;
 justify-content: center;
 align-items: center;
}`
``

로그인 후 복사

我们给元素添加了背景色。从上面的代码中可以看到，我们也使用了flex属性。我们可以将flex和grid结合在一起。在这个特殊的例子中，我们使用flex

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
   "header"
    "section"
    "right"
    "left"
    "footer"
}

aside:nth-of-type(1) {
  grid-area: left;
}

aside:nth-of-type(2) {
  grid-area: right;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

header {
  grid-area: header;
}

로그인 후 복사

실행중인 웹페이지는 다음과 같습니다.

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음) 1 .png

🎜이제 몇 가지 그리드 속성을 추가합니다: 🎜

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
    "header"
    "section"
    "right"
    "left"
    "footer";
  grid-template-rows: 1fr 6fr 2fr 2fr 1fr;
}

로그인 후 복사

🎜먼저 그리드 레이아웃을 활성화하는 display:grid를 정의한 다음 grid-gap 을 사용합니다. code>그리드 요소에 간격을 추가합니다. 🎜🎜다음으로 각 HTML 요소에 그리드 영역 이름을 할당했습니다. 컨테이너 클래스에서 grid-template-areas` 속성을 사용하여 html 템플릿의 모양을 정의할 수 있습니다. 그리드 템플릿 영역이 어떻게 배열되는지 주의하세요. 🎜

@media (min-width: 500px)  {
  .container {
    grid-template-areas: 
      "header header  header"
      "left   section right"
      "footer footer  right";
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-columns: 1fr 6fr 1fr;
  }
}

로그인 후 복사

🎜요소의 순서는 돔 구조와 다릅니다. 다만, 최종적으로는 당사 네트워크 지역의 순서대로 제시됩니다. 🎜🎜 CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

🎜🎜 다음 한 단계는 페이지를 반응형으로 만드는 것입니다. 우리는 더 큰 화면에서 다른 레이아웃을 사용하고 싶습니다. CSS 그리드를 사용하면 미디어 쿼리를 처리하고 반응형 레이아웃을 만드는 것이 매우 쉽습니다. 아래 코드를 보세요: 🎜

<p class="container">
  <p class="one">One</p>
  <p class="two">Two</p>
</p>

로그인 후 복사

🎜 우리가 해야 할 일은 미디어 쿼리에서 그리드 템플릿 영역의 순서를 바꾸는 것뿐입니다. 🎜🎜 CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

🎜🎜网그리드 열 및 행🎜🎜CSS 그리드를 사용하여 열과 행을 구성하는 방법은 무엇입니까? 다음 코드로 시작하세요. 🎜

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {
  background: cyan;
}
.two {
  background: pink;
}

로그인 후 복사

🎜기본 CSS 추가🎜

<p id="container">
  <p>
    This item is 50 pixels wide.
  </p>
  <p>
    Item with flexible width.
  </p>
  <p>
    This item is 50 pixels wide.
  </p>
  <p>
    Item with flexible width.
  </p>
  <p>
    Inflexible item of 100 pixels width.
  </p>
</p>

로그인 후 복사

🎜위의 돔 구조에 그리드 레이아웃을 사용하고 grid-gap을 사용하여 스타일 사이에 간격을 추가했습니다. 이제 grid-template-columns 속성을 사용하여 일부 열을 추가합니다. 🎜

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > p {
  background-color: #8ca0ff;
  padding: 5px;
}

로그인 후 복사

🎜이렇게 컬럼을 사용했어요. 첫 번째 열은 100px이고 두 번째 열은 200px로 지정합니다. 3 및 4 열에 auto를 적용했으므로 나머지 화면 길이는 그곳에서 절반으로 분할됩니다. 🎜🎜 CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

🎜🎜예 이제 페이지에 빈 공간이 있는지 확인하세요. 여섯 번째 열을 세 번째 열과 네 번째 열로 이동하려면 어떻게 해야 하나요? 이를 위해 grid-column-start 및 grid-column-end 속성을 사용할 수 있습니다. 🎜

<p class="container">
  <p class="item">One</p>
  <p class="item">Two</p>
  <p class="item">Three</p>
  <p class="item inner-grid">
    <p class="item">i</p>
    <p class="item">ii</p>
    <p class="item">iii</p>
    <p class="item">iv</p>
    <p class="item">v</p>
    <p class="item">vi</p>
  </p>
  <p class="item">Five</p>
  <p class="item">Six</p>
</p>

로그인 후 복사

🎜 grid-column-end: 5를 사용하고 5 값이 열 행을 가리킨다는 점에 유의하세요. 네 번째 열은 그리드의 다섯 번째 행에서 끝납니다. grid-column-start 및 grid-column-end 값은 그리드 선을 나타냅니다. 🎜🎜그리드 선 값이 혼란스럽다면 span을 사용할 수도 있습니다. 이는 위와 동일한 효과를 갖습니다. 🎜

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}

로그인 후 복사

🎜span 2의 경우 다음을 지정하세요. < code>p는 그리드에서 두 개의 슬롯을 차지합니다. 이제 두 번째 열을 확장하여 아래의 빈 공간을 채우고 싶다고 가정해 보겠습니다. grid-column-start 속성을 통해 이 작업을 쉽게 수행할 수도 있습니다. 🎜

.inner-grid {
  display: grid;
  background: white;
  height: 100%;
  grid-gap: 5px;
  grid-template-columns: repeat(3, auto);
}

로그인 후 복사

🎜 span 및 grid-row-start를 사용하여 두 개의 슬롯을 차지하도록 지정합니다. 🎜🎜 CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

🎜🎜As 위에서 볼 수 있듯이 우리는 소수의 CSS 그리드 속성을 사용하여 매우 복잡한 레이아웃을 구축할 수 있었습니다. 🎜🎜그리드 템플릿을 효과적으로 사용하세요🎜🎜이제 그리드 템플릿을 살펴보겠습니다. 이 섹션에서는 다양한 화면 크기에 맞게 다양한 레이아웃을 만드는 방법에 대해 설명합니다. 🎜🎜먼저 돔 구조를 만들어 보겠습니다. 🎜rrreee🎜그런 다음 몇 가지 스타일을 추가합니다. 🎜rrreee🎜요소에 배경색을 추가했습니다. 위 코드에서 볼 수 있듯이 flex 속성도 사용합니다. flex와 grid를 함께 결합할 수 있습니다. 이 특정 예에서는 flex 속성을 사용하여 콘텐츠를 중앙 정렬합니다. 🎜🎜🎜🎜

对于移动端，我们希望section在header下面，right 在 section 下面，我们可以使用网格区域来完成。首先，我们定义网格区域：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
   "header"
    "section"
    "right"
    "left"
    "footer"
}

aside:nth-of-type(1) {
  grid-area: left;
}

aside:nth-of-type(2) {
  grid-area: right;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

header {
  grid-area: header;
}

로그인 후 복사

在 grid-template-areas 中可以看到，我们先有header ，然后是section，然后是right，最后是left。此外，我们希望我们的section比 left 和 right都大点。为了实现这一点，我们可以使用rid-template-rows 属性

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
    "header"
    "section"
    "right"
    "left"
    "footer";
  grid-template-rows: 1fr 6fr 2fr 2fr 1fr;
}

로그인 후 복사

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

我们可以根据需要设置移动端的视图，接下我们使用媒体查询来适配一下大屏幕：

@media (min-width: 500px)  {
  .container {
    grid-template-areas: 
      "header header  header"
      "left   section right"
      "footer footer  right";
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-columns: 1fr 6fr 1fr;
  }
}

로그인 후 복사

如何使用`minmax`函数动态跟踪元素的大小

假设我们有两列，它们均匀地占据了屏幕上的可用空间。通过使用 grid-template-columns，我们可以很容易地做到这一点。但是，如果我们想要其中一个在200px到500px之间呢?我们的列可以适应不同的屏幕尺寸，但其中一个永远不会大于500px或小于200px。

对于这些类型的场景，我们使用minmax函数。让我们来看看它的实际效果。

<p class="container">
  <p class="one">One</p>
  <p class="two">Two</p>
</p>

로그인 후 복사

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {
  background: cyan;
}
.two {
  background: pink;
}

로그인 후 복사

在这个例子中，第一列总是在200px到500px之间。然而，第二列的最小值可以是100px，对于更大的屏幕，它将覆盖屏幕的其余部分。

如何使用 repeat 函数？

我们讨论一下元素中的重复模式。我们如何处理它们?我们可以重复我们的代码或使用javascript。不过，还有另一种方法可以用css来实现。repeat函数表示轨道列表的一个重复片段，允许以更紧凑的形式编写显示重复模式的大量列或行。

<p id="container">
  <p>
    This item is 50 pixels wide.
  </p>
  <p>
    Item with flexible width.
  </p>
  <p>
    This item is 50 pixels wide.
  </p>
  <p>
    Item with flexible width.
  </p>
  <p>
    Inflexible item of 100 pixels width.
  </p>
</p>

로그인 후 복사

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > p {
  background-color: #8ca0ff;
  padding: 5px;
}

로그인 후 복사

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

嵌套网格

我还可以将网格嵌套在另一个网格中，来看看如何实现这一点：

<p class="container">
  <p class="item">One</p>
  <p class="item">Two</p>
  <p class="item">Three</p>
  <p class="item inner-grid">
    <p class="item">i</p>
    <p class="item">ii</p>
    <p class="item">iii</p>
    <p class="item">iv</p>
    <p class="item">v</p>
    <p class="item">vi</p>
  </p>
  <p class="item">Five</p>
  <p class="item">Six</p>
</p>

로그인 후 복사

我们首先在外部container上声明网格：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}

로그인 후 복사

注意，我们在网格模板中有一个repeat函数，并将其与一个minmax函数组合在一起。我们现在也可以将网格属性应用到内部网格。

.inner-grid {
  display: grid;
  background: white;
  height: 100%;
  grid-gap: 5px;
  grid-template-columns: repeat(3, auto);
}

로그인 후 복사

这样，我们网格中嵌套了一个网格。

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

今天就跟大家分享到这里，感谢大家的观看，我们下期再见！

原文地址：https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/

作者：Shadid Haque

更多编程相关知识，请访问：编程入门！！

위 내용은 CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)

CSS 그리드에 대한 기본 지식

网格列和行

有效地使用 grid-templates

如何使用minmax函数动态跟踪元素的大小

如何使用 repeat 函数？

嵌套网格

如何使用`minmax`函数动态跟踪元素的大小