這篇文章給大家分享的是有關(guān)使用css grid構(gòu)建復(fù)雜布局的方法的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

在繁峙等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站建設(shè)、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營(yíng)銷(xiāo)型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站建設(shè),繁峙網(wǎng)站建設(shè)費(fèi)用合理。

網(wǎng)格布局是現(xiàn)代CSS中最強(qiáng)大的功能之一。使用網(wǎng)格布局可以幫助我們?cè)跊](méi)有任何外部 UI 框架的情況下構(gòu)建復(fù)雜的、快速響的布局。在這篇文章中，將會(huì)介紹所有我們需要了解的 CSS 網(wǎng)格知識(shí) 。

CSS 網(wǎng)格的基礎(chǔ)知識(shí)

我們直接進(jìn)入代碼，如下所示，先寫(xiě)些標(biāo)簽，源碼在這個(gè)鏈接里面：https://codepen.io/Shadid/pen/zYqNvgv

  
Header
  
  
Section
  
  

在上面，我們創(chuàng)建了一個(gè)header、兩個(gè)aside和一個(gè)footer元素，并將它們包裝在一個(gè)container 元素中。我們?yōu)槿萜髟刂械乃性靥砑颖尘吧妥煮w大小。

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

運(yùn)行的網(wǎng)頁(yè)如下：

現(xiàn)在我們添加一些網(wǎng)格屬性：

.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，它將啟用網(wǎng)格布局，然后我們使用grid-gap在網(wǎng)格元素中增加間隙。

接下來(lái)，我們?yōu)槊總€(gè)html元素分配了一個(gè)網(wǎng)格區(qū)域名稱。在container 類中，我們可以使用grid-template-areas`屬性定 義html 模板的外觀，注意網(wǎng)格模板區(qū)域是如何排列的。

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

元素的順序與 dom 結(jié)構(gòu)不同。但是，最終按我們網(wǎng)絡(luò)區(qū)域的順序來(lái)展示。

下一步是使我們的頁(yè)面具有響應(yīng)性。我們希望在更大的屏幕上使用不同的布局。CSS網(wǎng)格使得處理媒體查詢和創(chuàng)建響應(yīng)式布局變得非常容易?？聪旅娲a：

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

我們所要做的就是在媒體查詢中重新排序網(wǎng)格模板區(qū)域。

網(wǎng)格列和行

如何使用 CSS 網(wǎng)格來(lái)組織列和？ 先從下面的代碼開(kāi)始：

  
One
  
Two
  
Three
  
Four
  
Five
  
Six

添加一些基本的 css

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

.item {
  background: lightcoral;
}

我們?yōu)樯厦娴?dom 結(jié)構(gòu)使用了網(wǎng)格布局，并使用grid-gap增加了風(fēng)格之間的間距。 現(xiàn)在，我們使用grid-template-columns屬性來(lái)添加一些列。

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

就像這樣，我們使用了列。 我們指定第一列為100px，第二列為200px。 由于我們?cè)诘?code>3列和第4列中應(yīng)用了auto，因此剩余的屏幕長(zhǎng)度將在其中分成兩半。

可以看到現(xiàn)在頁(yè)面中有一個(gè)空白。 如果我想將第六列移至第三列和第四列怎么辦？ 為此，我們可以使用grid-column-start和grid-column-end屬性。

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

注意，我們使用grid-column-end: 5，值5指向列線。 第四列在網(wǎng)格的第五行結(jié)束。 grid-column-start和grid-column-end值是指網(wǎng)格線。

如果你覺(jué)得網(wǎng)格線的值讓人困惑，你也可以使用span，下面的效果與上面一樣：

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

對(duì)于span 2，指定p占用網(wǎng)格中的兩個(gè)插槽。 現(xiàn)在，假設(shè)要擴(kuò)展第二列填充下面的空白區(qū)域。 我們也可以通過(guò)grid-column-start屬性輕松地做到這一點(diǎn)。

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

我們使用span和grid-row-start來(lái)指定我們想要占據(jù)兩個(gè)插槽。

如上所見(jiàn)，我們已經(jīng)能夠使用少量的CSS網(wǎng)格屬性來(lái)構(gòu)建非常復(fù)雜的布局。

有效地使用 grid-templates

現(xiàn)在來(lái)看看grid-templates，在本節(jié)中，我們將討論如何為不同的屏幕大小創(chuàng)建不同的布局。

首先，還是先來(lái)一段 dom 結(jié)構(gòu)：

  
header
  
  
Section
  
  

接著，添加一些樣式：

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

我們給元素添加了背景色。從上面的代碼中可以看到，我們也使用了flex屬性。我們可以將flex和grid結(jié)合在一起。在這個(gè)特殊的例子中，我們使用flex屬性中心對(duì)齊內(nèi)容。

對(duì)于移動(dòng)端，我們希望section在header下面，right 在 section 下面，我們可以使用網(wǎng)格區(qū)域來(lái)完成。首先，我們定義網(wǎng)格區(qū)域：

.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都大點(diǎn)。為了實(shí)現(xiàn)這一點(diǎn)，我們可以使用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;
}

我們可以根據(jù)需要設(shè)置移動(dòng)端的視圖，接下我們使用媒體查詢來(lái)適配一下大屏幕：

@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函數(shù)動(dòng)態(tài)跟蹤元素的大小

假設(shè)我們有兩列，它們均勻地占據(jù)了屏幕上的可用空間。通過(guò)使用 grid-template-columns，我們可以很容易地做到這一點(diǎn)。但是，如果我們想要其中一個(gè)在200px到500px之間呢?我們的列可以適應(yīng)不同的屏幕尺寸，但其中一個(gè)永遠(yuǎn)不會(huì)大于500px或小于200px。

對(duì)于這些類型的場(chǎng)景，我們使用minmax函數(shù)。 讓我們來(lái)看看它的實(shí)際效果。

  
One
  
Two

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

在這個(gè)例子中，第一列總是在200px到500px之間。然而，第二列的最小值可以是100px，對(duì)于更大的屏幕，它將覆蓋屏幕的其余部分。

如何使用 repeat 函數(shù)？

我們討論一下元素中的重復(fù)模式。我們?nèi)绾翁幚硭鼈?我們可以重復(fù)我們的代碼或使用javascript。不過(guò)，還有另一種方法可以用css來(lái)實(shí)現(xiàn)。repeat函數(shù)表示軌道列表的一個(gè)重復(fù)片段，允許以更緊湊的形式編寫(xiě)顯示重復(fù)模式的大量列或行。

  

    This item is 50 pixels wide.
  
  

    Item with flexible width.
  
  

    This item is 50 pixels wide.
  
  

    Item with flexible width.
  
  

    Inflexible item of 100 pixels width.
  

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

嵌套網(wǎng)格

我還可以將網(wǎng)格嵌套在另一個(gè)網(wǎng)格中， 來(lái)看看如何實(shí)現(xiàn)這一點(diǎn)：

  
One
  
Two
  
Three
  

    
i
    
ii
    
iii
    
iv
    
v
    
vi
  

  
Five
  
Six

我們首先在外部container上聲明網(wǎng)格：

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

注意，我們?cè)诰W(wǎng)格模板中有一個(gè)repeat函數(shù)，并將其與一個(gè)minmax函數(shù)組合在一起。我們現(xiàn)在也可以將網(wǎng)格屬性應(yīng)用到內(nèi)部網(wǎng)格。

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

這樣，我們網(wǎng)格中嵌套了一個(gè)網(wǎng)格。

感謝各位的閱讀！關(guān)于使用css grid構(gòu)建復(fù)雜布局的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！