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

資訊專欄INFORMATION COLUMN

嘿~ 是時候?qū)W學柵格布局GRID了 布局入門

firim / 549人閱讀

摘要：有開始肯定就有結(jié)束，，是用來控制區(qū)域結(jié)束位置。還有的值都可以取負數(shù)的，負數(shù)意味著從后往前數(shù)。等價于表示橫跨幾個單元格。也一樣的是和的簡寫。

概念篇
學完了概念好像沒啥用。今天我們來使用Grid完成兩個簡單布局。

聲明容器

display: grid;或display: inline-grid;或display: subgrid;。grid 和 inline-grid 很好理解就是塊級網(wǎng)格及行內(nèi)塊級網(wǎng)格。subgrid 是用來定義子網(wǎng)格，子網(wǎng)格會繼承父網(wǎng)格的一系列規(guī)格。

劃分容器

定義橫、縱網(wǎng)格軌道。此處我們嘗試定義一個4 * 4的網(wǎng)格。code


    
1

    
2

    
3

    
4

    
5

    
6


.grid {
    display: grid;
    grid-template-columns: 60px 60px 60px 60px;
    grid-template-rows: 60px 60px 60px 60px;
    grid-gap: 5px;
}
.grid > div {
    background: grey;
    /*大家不要被下面的代碼迷惑，只是為了好看，哈哈*/
    display: flex;
    color: #fff;
    font-size: 150%;
    justify-content: center;
    align-items: center;
}

grid-template-columns

grid-template-columns用來定義網(wǎng)格列的寬度既軌道寬度，代碼表示將容器劃分為4列，列的寬度都為60px，寬度可以隨意的更改。

grid-template-rows

grid-template-rows用來定義網(wǎng)格行的高度，代碼表示將容器劃分4個行。通過以上兩行代碼就實現(xiàn)了4 * 4的網(wǎng)格劃分了。不信，增加幾個div數(shù)試一下。

grid-gap用來控制網(wǎng)格的間距的，準確地說是用來控制網(wǎng)格區(qū)域的間距。

控制項目

到目前為止，我們的 css 好像都作用在了容器上，那么如何來點兒高級的東西呢？code


    
1

    
2

    
3

    
4

    
5

    
6


.grid {
    display: grid;
    grid-template-columns: 60px 60px 60px 60px;
    grid-template-rows: 60px 60px 60px 60px;
    grid-gap: 5px;
}
.grid > div {
    background: grey;
    /*大家不要被下面的代碼迷惑，只是為了好看，哈哈*/
    display: flex;
    color: #fff;
    font-size: 150%;
    justify-content: center;
    align-items: center;
}
.item1 {
    grid-column-start: 4;
    grid-row-start: 2;
}
.item2 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.item3 {
    grid-column: -1 / -2;
    grid-row: 1 / 2;
}
.item4 {
    grid-column: 1 / span 2;
    grid-row: -1 / -3;
}
.item5 {
    grid-area: -1 / 3 / -3 / 4;
}
.item6 {
    grid-area: -1 / 5 / -3 / 4;
}

我們在概念篇中討論過，網(wǎng)格線是有編號的1、2、3、4...。要控制網(wǎng)格區(qū)域的位置就需要依賴于這這些網(wǎng)格線。下面通過5個例子講解如何通過控制網(wǎng)格線來實現(xiàn)區(qū)域的定位及單元格合并。

grid-column-start & grid-row-start

grid-column-start grid-row-start用來控制區(qū)域的列開始和行開始的位置，請注意這里我們并沒有給出 grid-column-end和grid-row-end的值，他們的默認值可以簡單理解為 start 的值加一。其實這里有個span的概念。

.item1 {
    grid-column-start: 4;
    grid-row-start: 2;
}
grid-column-end& grid-row-end

有開始肯定就有結(jié)束，grid-column-end，grid-row-end是用來控制區(qū)域結(jié)束位置。這里有個知識點需要大家記住，??end 的值是可以小余 start 的值的，不信你試試。還有grid-column-start、grid-column-end、grid-row-start、grid-row-end 的值都可以取負數(shù)的，負數(shù)意味著從后往前數(shù)??。

.item2 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
grid-column & grid-row

grid 的相關(guān)屬性這么多，肯定會有簡寫。grid-column是grid-column-start 和grid-column-end的簡寫。grid-row同理。

.item3 {
    grid-column: -1 / -2;
    grid-row: 1 / 2;
}
// 等價于
.item3 {
    grid-column-start: -1;
    grid-column-end: -2;
    grid-row-start: 1;
    grid-row-end: 2;
}
span

span表示橫跨幾個單元格。功能就是當你你不愿意一直數(shù)數(shù)時，就可以使用span。下面向大家展示區(qū)域定義的4種寫法。

.item4 {
    /* 1 */
    grid-column: 1 / span 2;

    /* 2 */
    grid-column: span 2 / 3;

    /* 3 */
    grid-column-start: 1;
    grid-column-end: span 2;

    /* 4 */
    grid-column-start: span 2;
    grid-column-end: 3;
    /*row 也一樣的*/
    grid-row: -1 / -3;
}
grid-area

grid-area是grid-row和grid-column的簡寫。順序是grid-row-start，grid-column-start，grid-row-end，grid-column-end。

.item5 {
    grid-area: -1 / 3 / -3 / 4;
}
// 等同于
.item {
    grid-row-start: -1;
    grid-row-end: -3;
    grid-column-start: 3;
    grid-column-end: 4;
}

此處留一個思考題：grid-area 里面可以使用 span 嗎？?

總結(jié)

本文希望大家可以掌握定義容器和軌道的方法和劃分網(wǎng)格區(qū)域的n種寫法。

推薦大家到cssgridgarden上練習一下，加深對 grid屬性的記憶。grid概念理解完之后就是考驗大家的記憶功力了。

姊妹篇 深入理解布局神器 flexbox

歡迎大家指正批評、或留言。QQ群：538631558

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112838.html

相關(guān)文章

  • 嘿~ 是時候學學柵格布局GRID了 概念篇

    摘要：網(wǎng)格線網(wǎng)格線有橫線和縱線，縱橫交錯的線就將網(wǎng)格容器切割成了最小的單元單元格。單元格圖中綠色背景的塊就是單元格，網(wǎng)格布局的最小計量單位，該容器一共有個單元格。 下一篇 grid 布局入門 Grid，真的布局神器。Css在引入Flex布局和Grid布局兩個模塊后，才真正有了布局的概念。最初的table布局不知道是神馬鬼，再到 float 滿天飛，可能還要使用abosulte來實現(xiàn)頁面的布局...

    source 評論0 收藏0

  • 前端入門24-響應式布局（BootStrap）

    摘要：聲明聲明本篇內(nèi)容摘抄自以下兩個來源中文網(wǎng)感謝大佬們的分享。版本是全球最受歡迎的前端組件庫，用于開發(fā)響應式布局移動設備優(yōu)先的項目。官方示例官方示例版本，官方還沒有中文教程，的中文教程倒是很齊全了。聲明 本篇內(nèi)容摘抄自以下兩個來源： BootStrap中文網(wǎng) 感謝大佬們的分享。 正文-響應式布局（BootStrap） 這次想來講講一個前端開發(fā)框架：BootStrap BootStrap 目前...

    lunaticf 評論0 收藏0

  • [譯] Grid 布局完全指南

    摘要：如果你定義的內(nèi)容包含重復部分，你可以使用標記去組織它。另外，也有一個比較復雜但是方便的語法指定三個屬性，示例如下與以下代碼是等價的因為無法隱式重置屬性，與。 簡介 CSS 柵格布局 (亦稱 Grid)，是一個基于柵格的二維布局系統(tǒng)，旨在徹底改變基于網(wǎng)格用戶界面的設計。CSS 一直以來并沒有把布局做的足夠好。剛開始，我們使用 tables，后來是 floats，positioning 和...

    Baoyuan 評論0 收藏0

  • 你不需要基于 CSS Grid 的柵格布局系統(tǒng)

    摘要：在過去的幾個星期里，我開始看到基于的布局框架和柵格系統(tǒng)的出現(xiàn)。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在過去的幾個星期里，我開始看到基于 CSS Grid 的布局框架和柵格系統(tǒng)的出現(xiàn)。我們驚訝它為什么出現(xiàn)的這么晚。但除了使用 CSS Gr...

    anonymoussf 評論0 收藏0

發(fā)表評論

0條評論

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