level 1
歡迎來(lái)到網(wǎng)格花園锋玲，在這里你可以通過(guò)書(shū)寫(xiě)CSS代碼來(lái)栽種你的胡蘿卜花園涵叮！使用grid-column-start 屬性來(lái)給胡蘿卜澆水。
比如說(shuō)割粮， grid-column-start: 3;將會(huì)給第三列的網(wǎng)格開(kāi)始的區(qū)域澆水，這也是描述網(wǎng)格中從左起第三列邊界的另一種方法舀瓢。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 3;
}
level 2
哎呀，在你的花園的角落里好像長(zhǎng)著一些雜草。用grid-column-start來(lái)除掉雜草榜轿。注意，雜草從第五個(gè)網(wǎng)格列開(kāi)始谬盐。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#poison {
grid-column-start: 5;
}
level 3
若僅使用grid-column-start，網(wǎng)格默認(rèn)只占一列飞傀。然而，你可以使用grid-column-end屬性將網(wǎng)格拓展到多列砸烦。
使用grid-column-end，將你的所有胡蘿卜澆水幢痘，但不要將水澆到土地上哦，我們要節(jié)約用水颜说！注意，胡蘿卜從第一列開(kāi)始门粪，第四列結(jié)束。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 1;
grid-column-end:4;
}
level 4
當(dāng)將grid-column-start和grid-column-end一起使用時(shí)玄妈，你也許已經(jīng)注意到結(jié)束的值比起始的值大。但事實(shí)證明并非如此拟蜻！
嘗試設(shè)置grid-column-end的值小于5，以此來(lái)給胡蘿卜澆水瞭郑。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 5;
grid-column-end:2;
}
level 5
如果你想要從右邊數(shù)網(wǎng)格的列數(shù)而不是從左邊數(shù)，你可以設(shè)置grid-column-start和grid-column-end為負(fù)值屈张。比如說(shuō)，你可以設(shè)置它為-1來(lái)指定為右邊的第一列阁谆。
嘗試將grid-column-end設(shè)置為負(fù)值
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 1;
grid-column-end:-2;
}
level 6
現(xiàn)在嘗試設(shè)置grid-column-start為負(fù)值。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#poison {
grid-column-start:-3;
}
level 7
你可以根據(jù)網(wǎng)格的開(kāi)始和結(jié)束位置來(lái)定義一個(gè)網(wǎng)格項(xiàng)场绿，你也可以用span關(guān)鍵詞來(lái)指定你所要跨越的寬度。請(qǐng)注意span只能是正值。
比如說(shuō)咒林，你可以通過(guò)grid-column-end: span 2;來(lái)給這些胡蘿卜澆水。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 2;
grid-column-end: span 2;
}
level 8
嘗試在grid-column-end屬性中使用span關(guān)鍵字來(lái)給胡蘿卜澆水垫竞。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start: 1;
grid-column-end:span 5;
}
level 9
你也可以將span關(guān)鍵字和grid-column-start一起使用蛀序，相對(duì)于結(jié)束位置來(lái)設(shè)置其寬度。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column-start:3;
grid-column-end: 6;
}
level 10
如果每次都輸入grid-column-start和grid-column-end兩個(gè)屬性徐裸，我們一定會(huì)厭煩的。幸運(yùn)的是重贺，grid-column是一個(gè)縮寫(xiě)形式，它可以一次接受兩個(gè)值檬姥，只要用'/'分開(kāi)就好。
比如說(shuō)：grid-column: 2 / 4;就會(huì)設(shè)置網(wǎng)格項(xiàng)從第二列開(kāi)始健民，到第四列結(jié)束贫贝。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column:4/6;
}
level 11
嘗試使用grid-column來(lái)給胡蘿卜澆水。span關(guān)鍵字在這個(gè)簡(jiǎn)寫(xiě)中也是可以使用的稚晚，所以你也可以試一下喲
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column:2/5;
}
level 12
其中一件事情使CSS網(wǎng)格布局和Flex盒布局不同的是，你可以很輕松的在二維的空間里定位一個(gè)網(wǎng)格項(xiàng): 行和列客燕。grid-row-start就像grid-column-start一樣，只不過(guò)是在垂直方向指定起始位置也搓。
用grid-row-start來(lái)給胡蘿卜澆水吧！
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-row-start:3;
}
level 13
現(xiàn)在你可以試一試縮寫(xiě)屬性 grid-row傍妒。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-row:3/6;
}
level 14
同時(shí)使用grid-column和grid-row來(lái)設(shè)置網(wǎng)格項(xiàng)在行和列中的位置。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#poison {
grid-column:2;
grid-row:5;
}
level 15
你也可以使用grid-column和grid-row一起來(lái)定義一個(gè)較大區(qū)域的網(wǎng)格颤练。試一下吧！
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column:2/6;
grid-row:1/6;
}
level 16
如果你覺(jué)得同時(shí)輸入grid-column和grid-row也很復(fù)雜，我們還有另一種縮寫(xiě)患雇。grid-area屬性接受4個(gè)由'/'分開(kāi)的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。
舉個(gè)例子如下所示：grid-area: 1 / 1 / 3 / 6;苛吱。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-area:1/2/4/6;
}
level 17
如果我們有很多個(gè)網(wǎng)格項(xiàng)呢？你可以任意覆蓋它們不用有任何擔(dān)心又谋。用grid-area定義第二個(gè)網(wǎng)格項(xiàng)為所有未澆水的胡蘿卜澆水。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water-1 {
grid-area: 1 / 4 / 6 / 5;
}
#water-2 {
grid-area:2/3/5/6;
}
level 18
如果網(wǎng)格項(xiàng)不是以grid-area彰亥、grid-column、grid-row 等顯示的任斋，它們會(huì)自動(dòng)按照它們?cè)谠闯绦蛑谐霈F(xiàn)的位置擺放。同樣我們也可以使用order屬性來(lái)重寫(xiě)它的順序废酷，這也是網(wǎng)格布局優(yōu)于表格布局的好處之一。
默認(rèn)情況下澈蟆，所有的網(wǎng)格項(xiàng)的order都是0，但是順序也可以被任意設(shè)置為正數(shù)或者負(fù)數(shù)趴俘，就像z-index一樣。
現(xiàn)在寥闪，看到第二列的胡蘿卜中毒了并且最后有雜草的那一列也澆了水。現(xiàn)在就改變中毒的網(wǎng)格項(xiàng)的order的值來(lái)修復(fù)它們吧
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.water {
order: 0;
}
#poison {
order:1;
}
level 19
現(xiàn)在水和中毒的土地是交替出現(xiàn)的疲憋，并且所有的雜草都出現(xiàn)在每一列的開(kāi)始。設(shè)置中毒土地的正確order值來(lái)修復(fù)它們吧缚柳！
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
.water {
order: 0;
}
.poison {
order:-1;
}
level 20
到現(xiàn)在為止，你已經(jīng)將你的花園設(shè)置為5列喂击，每列占總寬度的20%；5行翰绊，每行占全部高度的20%旁壮。
這是通過(guò)設(shè)置grid-template-columns: 20% 20% 20% 20% 20%;和grid-template-rows: 20% 20% 20% 20% 20%;來(lái)實(shí)現(xiàn)的。每一條規(guī)則都有5個(gè)值抡谐，代表創(chuàng)建了5個(gè)列，每一列設(shè)置為花園寬度的20%桐猬。
但是你也可以任意設(shè)置網(wǎng)格項(xiàng)的寬度。為grid-template-columns設(shè)置一個(gè)新的值來(lái)給你的胡蘿卜澆水吧溃肪！你想要將第一列的寬度設(shè)置為50%。
#garden {
display: grid;
grid-template-columns:50%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column: 1;
grid-row: 1;
}
level 21
指定一些具有相同寬度的網(wǎng)格項(xiàng)會(huì)變得很乏味惫撰。幸運(yùn)的是有repeat函數(shù)來(lái)幫助我們。
比如說(shuō)厨钻，之前我們使用grid-template-columns: 20% 20% 20% 20% 20%;屬性定義了5列，每列占20%夯膀。這可以被簡(jiǎn)寫(xiě)為：grid-template-columns: repeat(5, 20%);
使用grid-template-columns屬性以及repeat函數(shù)，創(chuàng)建8列诱建，每列占12.5%的寬度。這樣你就不會(huì)給花園澆過(guò)多的水俺猿。
#garden {
display: grid;
grid-template-columns:repeat(8, 12.5%);
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-column: 1;
grid-row: 1;
}
level 22
grid-template-columns不僅僅只接受百分比的值，也接受像像素或ems這樣的長(zhǎng)度單位辜荠。你甚至可以將不同的長(zhǎng)度單位混合使用抓狭。
接下來(lái)，分別將列的寬度設(shè)置為100px否过、3em和40%。
#garden {
display: grid;
grid-template-columns:100px 3em 40%;
grid-template-rows: 20% 20% 20% 20% 20%;
}
level 23
網(wǎng)格系統(tǒng)也引入了一個(gè)新的單位苗桂，分?jǐn)?shù)fr。每一個(gè)fr單元分配一個(gè)可用的空間煤伟。比如說(shuō)癌佩，如果兩個(gè)元素分別被設(shè)置為1fr和3fr，那么空間就會(huì)被平均分配為4份围辙；第一個(gè)元素占據(jù)1/4，第二個(gè)元素占據(jù)3/4姚建。
這里，雜草占據(jù)了你第一行的左1/6掸冤，胡蘿卜占據(jù)著剩下的5/6。創(chuàng)建兩個(gè)列稿湿，并使用fr單位來(lái)定義它們的寬度。
#garden {
display: grid;
grid-template-columns:1fr 5fr;
grid-template-rows: 20% 20% 20% 20% 20%;
}
level 24
當(dāng)列的寬度采用像素缎罢，百分比或者ems的單位的時(shí)候，其他使用fr單位設(shè)置的列將會(huì)平分剩下的空間策精。
這里的胡蘿卜在左邊形成了一個(gè)50像素的列，并且雜草在右邊也占據(jù)著50像素的寬度咽袜。使用grid-template-columns屬性丸卷，創(chuàng)建這兩個(gè)列询刹，使用fr再創(chuàng)建三列，使其平均占據(jù)剩下的空間凹联。
#garden {
display: grid;
grid-template-columns:50px 1fr 1fr 1fr 50px;
grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
grid-area: 1 / 1 / 6 / 2;
}
#poison {
grid-area: 1 / 5 / 6 / 6;
}
level 25
現(xiàn)在，在你的花園的左邊有一列雜草蔽挠，占據(jù)75像素寬。剩余空間的3/5正在長(zhǎng)著胡蘿卜澳淑，剩下的2/5已經(jīng)雜草泛濫了。
用grid-template-columns屬性杠巡，將px和fr單位結(jié)合起來(lái)，來(lái)制作必要的列氢拥。
#garden {
display: grid;
grid-template-columns:75px 3fr 2fr;
grid-template-rows: 100%;
}
level 26
grid-template-rows和grid-template-columns的作用大概相同锨侯。
用grid-template-rows屬性來(lái)為花園中除了頂部50像素之外的所有區(qū)域澆水。注意：水被設(shè)置為僅填充第五行识腿，所以你總共需要?jiǎng)?chuàng)建5行。
#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: repeat(4, 12.5px) 1fr;
}
#water {
grid-column: 1 / 6;
grid-row: 5 / 6;
}
level 27
grid-template是grid-template-rows和grid-template-columns的縮寫(xiě)形式渡讼。
比如說(shuō)，grid-template: 50% 50% / 200px;將創(chuàng)建一個(gè)具有兩行的網(wǎng)格耳璧，每一行占據(jù)50%，以及一個(gè)200像素寬的列旨枯。
嘗試著使用grid-template屬性來(lái)澆水，需要包括你的花園上部的60%攀隔，以及左側(cè)的200像素。
#garden {
display: grid;
grid-template: 60% 40%/200px;
}
#water {
grid-column: 1;
grid-row: 1;
}
level 28
你的花園看起來(lái)很棒±バ冢現(xiàn)在，你在花園的底部留下了50像素的小路满粗，其他的空間用來(lái)種植胡蘿卜辈末。
不幸的是挤聘，胡蘿卜地的20%已經(jīng)雜草叢生了，最后一次用CSS網(wǎng)格布局來(lái)規(guī)劃你的花園吧捅彻！
#garden {
display: grid;
grid-template:1fr 50px/20% 80%
}
