国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css中grid屬性的使用

rubyshen / 1694人閱讀

摘要:值為加數字,表示覆蓋了這條線的位置網格子項內容與格線對齊參考借鑒地址

grid布局 加在父元素上的屬性 grid-template-columns/grid-template-rows

定義元素的行或列的寬高

如果父元素被等分成了9等分,則,不管有多少個子元素,都顯示9等分

grid-template-columns: 33% 33% 33%;可以寫成grid-template-columns:repeat(3, 33%);

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container1 {
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: 33% 33% 33%;
}

grid-template-areas

父元素的grid-template-areas配合子元素的grid-area定義網格區域

一個句點表示一個空的網格單元

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container2 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "header header . footer"
    "main main . sidebar"
    "main main . sidebar";
}

.container2 .item-1 {
  grid-area: header;
}

.container2 .item-2 {
  grid-area: main;
}

.container2 .item-3 {
  grid-area: sidebar;
}

.container2 .item-4 {
  grid-area: footer;
}
header
main
sidebar
footer

grid-column-gap/grid-row-gap/grip-gap

指網格線的大小,也可以說是網格子項之間的間距

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container3 {
  grid-template-columns: repeat(3, 30%);
  grid-template-rows: repeat(3, 30%);
  grid-column-gap: 2%;
  grid-row-gap: 2%;
}

justify-items/align-items

justify-items讓子元素的內容和縱向列軸對齊

align-items讓子元素的內容和橫向行軸對齊

兩個屬性都有四個值

我的例子中,為了方便對比,嵌套了grid網格

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container4 {
  width: 400px;
  height: 200px;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
}
.container4 .item {
  display: grid;
}
.container4 .item div {
  background-color: coral;
  border: 1px dashed #aaa
}
.container4 .item-1 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: start;
}
.container4 .item-2 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: end;
}
.container4 .item-3 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: center;
}
.container4 .item-4 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  justify-items: stretch;
}
.container4 .item-5 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: start;
}
.container4 .item-6 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: end;
}
.container4 .item-7 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: center;
}
.container4 .item-8 {
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
  align-items: stretch;
}
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list

justify-content/align-content

設置子元素的對齊方式,justify表示縱向,align表示橫向

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container5 {
  width: 700px;
  height: 200px;
  grid-template-columns: repeat(7, 14%);
  grid-template-rows: repeat(2, 50%);
}

.container5 .item {
  display: grid;
}

.container5 .item div {
  background-color: coral;
  border: 1px dashed #aaa
}

.container5 .item-1 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: start;
}

.container5 .item-2 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: end;
}

.container5 .item-3 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: center;
}

.container5 .item-4 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: stretch;
}

.container5 .item-5 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-around;
}

.container5 .item-6 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-between;
}

.container5 .item-7 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  justify-content: space-evenly;
}

.container5 .item-8 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: start;
}

.container5 .item-9 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: end;
}

.container5 .item-10 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: center;
}

.container5 .item-11 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: stretch;
}

.container5 .item-12 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-around;
}

.container5 .item-13 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-between;
}

.container5 .item-14 {
  grid-template-columns: repeat(2, 40%);
  grid-template-rows: repeat(2, 40%);
  align-content: space-evenly;
}
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list
list

grid-auto-columns/grid-auto-rows

grid-column后面的值如果是1 / 2形式,表示的是從第1列網格線開始到第2列網格線結束,如果這個屬性定義的網格超出了父元素的范圍,則會自動生成隱式網格

grid-auto-columns和grid-auto-rows兩個屬性來指定這些隱式網格軌跡的寬度

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container6 {
  width: 120px;
  height: 180px;
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
  grid-auto-columns: 60px;
}
.container6 .item-1 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  border: 1px solid #ccc;
}
.container6 .item-2 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
  border: 1px solid #ccc;
}
1/2&2/3
5/6&2/3


grid-auto-flow

沒有網格元素的時候,自動排列

row表示從左到右排列,column表示從上到下排列

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container7 {
  display: grid;
  width: 200px;
  height: 40px;
  grid-template-columns: 40px 40px 40px 40px 40px;
  grid-template-rows: 40px 40px;
  /* grid-auto-flow: row; */
  grid-auto-flow: column;
}
.container7 .item-1 {
  grid-column: 1;
  grid-row: 1 / 3;
}

.container7 .item-5 {
  grid-column: 5;
  grid-row: 1 / 3;
}
1
2
3
4
5


加在子元素上的屬性 grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row

定義網格開始或者結束的位置

值為數字,表示從這條線開始。值為span加數字,表示覆蓋了這條線的位置

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}

.container8 {
  margin-top: 20px;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(5, 20%);
}
.container8 .item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.container8 .item-2 {
  grid-column-start: 4;
  grid-column-end: span 5;
  grid-row-start: 2;
  grid-row-end: span 5;
}
.container8 .item-3 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 4;
}
item-1
item-2
item-3


justify-self/align-self

網格子項內容與格線對齊

.container {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: coral;
  margin: 10px;
}

.container .item {
  border: 1px solid #ccc;
  background-color: chocolate;
}
.container9 {
  width: 400px;
  height: 200px;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
}
.container9 .item-1 {
  justify-self: start;
}
.container9 .item-2 {
  justify-self: end;
}
.container9 .item-3 {
  justify-self: center;
}
.container9 .item-4 {
  justify-self: stretch;
}
.container9 .item-5 {
  align-self: start;
}
.container9 .item-6 {
  align-self: end;
}
.container9 .item-7 {
  align-self: center;
}
.container9 .item-8 {
  align-self: stretch;
}
item-1
item-2
item-3
item-4
item-5
item-6
item-7
item-8


參考借鑒地址

https://www.imooc.com/article...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/114029.html

相關文章

  • CSS Grid 布局完全指南(圖解 Grid 詳細教程)

    摘要:重復網格區域的名稱導致內容跨越這些單元格。中間一排將由兩個區域,一個是空單元格,一個區域組成。你可以使用任意數量的相鄰的點來聲明單個空單元格。只要這些點之間沒有空隙隔開,他們就代表一個單獨的單元格。? CSS Grid 布局是 CSS 中最強大的布局系統。與 flexbox 的一維布局系統不同,CSS Grid 布局是一個二維布局系統,也就意味著它可以同時處理列和行。通過將 CSS 規則應用...

    flybywind 評論0 收藏0
  • CSS自定義屬性+CSS Grid網格實現超級布局能力

    摘要:自定義屬性可以方便的實現很多功能例如主題變化。最近我一直在嘗試利用自定義屬性和網格的組合能實現什么神奇的效果,我需要在不同的斷點處重新定義和屬性。太多的可能性了瀏覽器支持目前,全球的瀏覽器都支持自定義屬性及以下版本是明顯的例外。 我在工作中使用CSS Grid已經有幾個月了,我非常喜歡它在頁面布局時給我的靈活性。這么長時間以來,我們一直沒有一個真正的網格布局解決方案——用浮動和flex...

    Panda 評論0 收藏0
  • CSS自定義屬性+CSS Grid網格實現超級布局能力

    摘要:自定義屬性可以方便的實現很多功能例如主題變化。最近我一直在嘗試利用自定義屬性和網格的組合能實現什么神奇的效果,我需要在不同的斷點處重新定義和屬性。太多的可能性了瀏覽器支持目前,全球的瀏覽器都支持自定義屬性及以下版本是明顯的例外。 我在工作中使用CSS Grid已經有幾個月了,我非常喜歡它在頁面布局時給我的靈活性。這么長時間以來,我們一直沒有一個真正的網格布局解決方案——用浮動和flex...

    greatwhole 評論0 收藏0
  • CSS自定義屬性+CSS Grid網格實現超級布局能力

    摘要:自定義屬性可以方便的實現很多功能例如主題變化。最近我一直在嘗試利用自定義屬性和網格的組合能實現什么神奇的效果,我需要在不同的斷點處重新定義和屬性。太多的可能性了瀏覽器支持目前,全球的瀏覽器都支持自定義屬性及以下版本是明顯的例外。 我在工作中使用CSS Grid已經有幾個月了,我非常喜歡它在頁面布局時給我的靈活性。這么長時間以來,我們一直沒有一個真正的網格布局解決方案——用浮動和flex...

    lx1036 評論0 收藏0
  • JavaScript五十問——對比來說CSSGrid與FlexBox(下篇)

    摘要:語法如下是簡寫屬性,也可以分別定義行間隔和列間隔。語法如下屬性值得含義同這里不再過多說明,讀者可以自行驗證。 前言 在上篇——JavaScript五十問——對比來說CSS的Grid與FlexBox(上篇),我介紹了Flex的屬性與使用,今天我們來總結一下Grid的具體使用方法,最后會結合Flex與Grid布局講一講二者的聯系與不同。 需要注意得是,Grid布局與我們之前所熟悉的css布...

    Moxmi 評論0 收藏0
  • CSS基礎篇--快速使用CSS Grid布局,實現響應式設計

    摘要:的個值表示三列,相應的數值表示列寬即都為。嘗試其它布局把移到右邊實現后的效果使用點來創建空白的網格單元格實現效果真正的響應式布局假設你想在移動設備上查看的是標題旁邊是菜單。 常用Grid布局屬性介紹 下面從一個簡單Grid布局例子說起。 CSS Grid 布局由兩個核心組成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是實際的 grid(網格),items...

    cjie 評論0 收藏0

發表評論

0條評論

rubyshen

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<