grid布局筆記

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,html{
            height: 100%;
            padding: 0;margin: 0;
        }
        .Grid{
            background: #7a8a9a;
            height: 100%;
            /* 表示使用grid布局 */
            display: grid;
            /* 表示兩列卵迂，分別是100px和200px  */
            /* grid-template-columns:100px 200px;  */

            /* 表示三列婚夫，分別是第一列100px和最后一列是200px，中間一列自適應(yīng)  */
            /* grid-template-columns:100px auto 200px;  */

            /* 表示三列自適應(yīng)笨奠，第三列寬度是前兩列的兩倍 */
            grid-template-columns:1fr 1fr 2fr;  

            /* repeat（n,val）价认，簡寫敏释，表示重復(fù)n次，每個的值為val,可以是百分比也可以是像素 */
            grid-template-rows: repeat(3, 33.33%);

            /* auto-fill屬性橄维，表示自動填充100px的內(nèi)容，直到容器最大寬度再換行 */
            /* grid-template-columns:repeat(auto-fill,100px) */

            /*內(nèi)容中的間距設(shè)置拴曲，等同于下面的div設(shè)置*/
            /* grid-row-gap:5px;
            grid-column-gap:5px; */
            /* 間距簡寫争舞，第一個shift行，第二個是列 */
            grid-gap:5px 5px;
            
            /*默認的放置順序是"先行后列"澈灼，即先填滿第一行竞川，再開始放入第二行，這個順序由grid-auto-flow屬性決定叁熔，默認值是row委乌，即"先行后列"。也可以將它設(shè)成column荣回，變成"先列后行"遭贸。 */
            /* grid-auto-flow: column; */

            /*justify-items屬性設(shè)置單元格內(nèi)容的水平位置（左中右），align-items屬性設(shè)置單元格內(nèi)容的垂直位置（上中下）心软。 flex box */

            /* grid-auto-columns屬性和grid-auto-rows屬性用來設(shè)置壕吹，瀏覽器自動創(chuàng)建的多余網(wǎng)格的列寬和行高。
            它們的寫法與grid-template-columns和grid-template-rows完全相同删铃。如果不指定這兩個屬性耳贬，瀏覽器完全根據(jù)單元格內(nèi)容的大小，決定新增網(wǎng)格的列寬和行高猎唁。 */
            
            /* grid-column-start屬性：左邊框所在的垂直網(wǎng)格線 */
            /* grid-column-end屬性：右邊框所在的垂直網(wǎng)格線 */
            /* grid-row-start屬性：上邊框所在的水平網(wǎng)格線 */
            /* grid-row-end屬性：下邊框所在的水平網(wǎng)格線 */
            /* grid-column屬性是grid-column-start和grid-column-end的合并簡寫形式咒劲，grid-row屬性是grid-row-start屬性和grid-row-end的合并簡寫形式 */
                /* .item-1 {
                grid-column: 1 / 3;
                grid-row: 1 / 2;
                 }
                /* 等同于 */
               /* .item-1 {
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 2;
                } */

        }
      /*等同于上面的algin-items:center和justify-items:center 和grid-gap:5px*/
        .Grid>div{
            background: #ff6666;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="Grid">
        <div >1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
</body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市诫隅，隨后出現(xiàn)的幾起案子腐魂，更是在濱河造成了極大的恐慌，老刑警劉巖逐纬，帶你破解...
沈念sama閱讀 218,284評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件蛔屹，死亡現(xiàn)場離奇詭異，居然都是意外死亡风题，警方通過查閱死者的電腦和手機判导，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,115評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來沛硅，“玉大人眼刃，你說我怎么就攤上這事∫〖。” “怎么了擂红？”我有些...
開封第一講書人閱讀 164,614評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經(jīng)常有香客問我昵骤，道長树碱，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,671評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任变秦，我火速辦了婚禮成榜，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘蹦玫。我一直安慰自己赎婚，他們只是感情好，可當我...
茶點故事閱讀 67,699評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布樱溉。她就那樣靜靜地躺著挣输，像睡著了一般。火紅的嫁衣襯著肌膚如雪福贞。梳的紋絲不亂的頭發(fā)上撩嚼，一...
開封第一講書人閱讀 51,562評論 1贊 305
城市分裂傳說
那天，我揣著相機與錄音挖帘，去河邊找鬼完丽。笑死，一個胖子當著我的面吹牛肠套，可吹牛的內(nèi)容都是我干的舰涌。我是一名探鬼主播猖任，決...
沈念sama閱讀 40,309評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼你稚，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了朱躺？” 一聲冷哼從身側(cè)響起刁赖，我...
開封第一講書人閱讀 39,223評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎长搀，沒想到半個月后宇弛，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,668評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡源请，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,859評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年枪芒，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谁尸。...
茶點故事閱讀 39,981評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡舅踪，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出良蛮，到底是詐尸還是另有隱情抽碌，我是刑警寧澤，帶...
沈念sama閱讀 35,705評論 5贊 347
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布决瞳，位于F島的核電站货徙，受9級特大地震影響左权，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜痴颊，卻給世界環(huán)境...
茶點故事閱讀 41,310評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一赏迟、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧蠢棱，春花似錦瀑梗、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,904評論 0贊 22
一樁弒父案抛丽，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至饰豺，卻和暖如春亿鲜，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背冤吨。一陣腳步聲響...
開封第一講書人閱讀 33,023評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工蒿柳，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人漩蟆。一個月前我還...
沈念sama閱讀 48,146評論 3贊 370
代替公主和親
正文我出身青樓垒探，卻偏偏與公主長得像，于是被迫代替她去往敵國和親怠李。傳聞我的和親對象是個殘疾皇子圾叼，可洞房花燭夜當晚...
茶點故事閱讀 44,933評論 2贊 355

grid布局筆記

推薦閱讀更多精彩內(nèi)容