CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)
- 青灯夜游앞으로
- 2020-10-29 17:41:242695검색
(권장 튜토리얼: 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;
}
运行的网页如下：
现在我们添加一些网格属性：
.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网格使得处理媒体查询和创建响应式布局变得非常容易。看下面代码：
@media (min-width: 670px) {
.container {
grid-template-areas:
"header header header"
"aside-1 section aside-2"
"footer footer footer"
}
}
我们所要做的就是在媒体查询中重新排序网格模板区域。
网格列和行
如何使用 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，因此剩余的屏幕长度将在其中分成两半。
可以看到现在页面中有一个空白。 如果我想将第六列移至第三列和第四列怎么办？ 为此，我们可以使用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网格属性来构建非常复杂的布局。
有效地使用 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;
}실행중인 웹페이지는 다음과 같습니다.
 "160396419979473CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)")
.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;
}
}🎜요소의 순서는 돔 구조와 다릅니다. 다만, 최종적으로는 당사 네트워크 지역의 순서대로 제시됩니다. 🎜🎜 "160396423581720CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)")
🎜🎜 다음 한 단계는 페이지를 반응형으로 만드는 것입니다. 우리는 더 큰 화면에서 다른 레이아웃을 사용하고 싶습니다. CSS 그리드를 사용하면 미디어 쿼리를 처리하고 반응형 레이아웃을 만드는 것이 매우 쉽습니다. 아래 코드를 보세요: 🎜<p> </p><p>One</p> <p>Two</p>🎜 우리가 해야 할 일은 미디어 쿼리에서 그리드 템플릿 영역의 순서를 바꾸는 것뿐입니다. 🎜🎜
🎜🎜网그리드 열 및 행🎜🎜CSS 그리드를 사용하여 열과 행을 구성하는 방법은 무엇입니까? 다음 코드로 시작하세요. 🎜.container {
display: grid;
height: 100vh;
grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {
background: cyan;
}
.two {
background: pink;
}🎜기본 CSS 추가🎜<p> </p><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>🎜위의 돔 구조에 그리드 레이아웃을 사용하고
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를 적용했으므로 나머지 화면 길이는 그곳에서 절반으로 분할됩니다. 🎜🎜 "160396422527980CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)")
🎜🎜예 이제 페이지에 빈 공간이 있는지 확인하세요. 여섯 번째 열을 세 번째 열과 네 번째 열로 이동하려면 어떻게 해야 하나요? 이를 위해 grid-column-start 및 grid-column-end 속성을 사용할 수 있습니다. 🎜<p> </p><p>One</p> <p>Two</p>🎜Three
i
ii
iii
iv
v
vi
Five
Six
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의 경우 다음을 지정하세요. 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를 사용하여 두 개의 슬롯을 차지하도록 지정합니다. 🎜🎜 "160396422091085CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)")
🎜🎜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;
}
我们可以根据需要设置移动端的视图，接下我们使用媒体查询来适配一下大屏幕：
@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> </p><p>One</p> <p>Two</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> </p><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>
#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;
}
 "160396454872495CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)")
嵌套网格
我还可以将网格嵌套在另一个网格中， 来看看如何实现这一点：
<p> </p><p>One</p> <p>Two</p>Three
i
ii
iii
iv
v
vi
Five
Six
我们首先在外部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);
}
这样，我们网格中嵌套了一个网格。
 "160396414785300CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)")
今天就跟大家分享到这里，感谢大家的观看，我们下期再见！
原文地址：https://blog.soshace.com/how-to-build-complex-layouts-with-css-grid/
作者：Shadid Haque
更多编程相关知识，请访问：编程入门！！
위 내용은 CSS 그리드를 사용하여 복잡한 레이아웃을 구축하는 팁! (수집할 가치가 있음)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!