嘿~ 是時候?qū)W學柵格布局GRID了概念篇

source 發(fā)布于2019-08-29 13:57 / 668人閱讀

摘要：網(wǎng)格線網(wǎng)格線有橫線和縱線，縱橫交錯的線就將網(wǎng)格容器切割成了最小的單元單元格。單元格圖中綠色背景的塊就是單元格，網(wǎng)格布局的最小計量單位，該容器一共有個單元格。

下一篇 grid 布局入門

Grid，真的布局神器。Css在引入Flex布局和Grid布局兩個模塊后，才真正有了布局的概念。最初的table布局不知道是神馬鬼，再到 float 滿天飛，可能還要使用abosulte來實現(xiàn)頁面的布局。總之，實現(xiàn)起來特別別扭，要時刻注意：我這么寫會不會塌陷，會不會給后面的元素造成影響，尼瑪為啥還串位了。筆者斗膽的稱這些實現(xiàn)為布局trick，F(xiàn)lex和Grid才是真的布局。Flex負責一維布局，Grid負責二維布局，兩個布局都非常強大，但是一個比一個難，屬性多到想吐血，誰讓人家牛逼是模塊而不是屬性呢。今天我們只圍繞下圖來介紹Grid布局相關概念。

網(wǎng)格容器

Grid布局開始的地方，grid模塊的承載體。外部看來就是個塊也可能是inline-block塊，容器內(nèi)部一個格一個格的。和 Flex 布局一樣，它也分容器屬性和項目屬性。

網(wǎng)格線

網(wǎng)格線有橫線和縱線，縱橫交錯的線就將網(wǎng)格容器切割成了最小的單元單元格。網(wǎng)格線是有編號的，從數(shù)字1開始編號。上圖中有6條橫線和6條縱線。如果你喜歡也可以給線起名字，一根線還能有多個名字。

單元格

Grid Cell 圖中綠色背景的塊就是單元格，網(wǎng)格布局的最小計量單位，該容器一共有25個單元格。

網(wǎng)格軌道

兩條相鄰的網(wǎng)格線中間部分就是軌道，為啥要有軌道的概念呢?因為需要設定軌道的寬度，如果將寬高多帶帶的設置到單元格上那很可能變成了瀑布流復雜程度嗖嗖地上升。再看看上圖的淺藍色和淺粉色軌道感受一下。

網(wǎng)格區(qū)域

網(wǎng)格線、單元格、和軌道存在的意義就是將容器劃分出你所需要的區(qū)域Grid Area。區(qū)域是可包含多個單元格的一個整塊，那么如何劃分呢？兩條橫的網(wǎng)格線和兩條縱的網(wǎng)格線交叉的部分就是區(qū)域了。將容器合理的劃分出多個區(qū)域，那么布局目的也達到了。區(qū)域是可以重疊的，所以它是有 z-index。

今天的概念部分就介紹到這里。后續(xù)會詳細的介紹 grid布局編程相關的知識。
ps: 圖片摘抄于CSS Grid布局：什么是網(wǎng)格布局

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

GPU云服務器云服務器是什么時候推出的小程序是什么時候嘿嘿嘿阿里云是什么時候推出的

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

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

嘿~ 是時候學學柵格布局GRID了布局入門

摘要：有開始肯定就有結(jié)束，，是用來控制區(qū)域結(jié)束位置。還有的值都可以取負數(shù)的，負數(shù)意味著從后往前數(shù)。等價于表示橫跨幾個單元格。也一樣的是和的簡寫。概念篇學完了概念好像沒啥用。今天我們來使用Grid完成兩個簡單布局。聲明容器 display: grid;或display: inline-grid;或display: subgrid;。grid 和 inline-grid 很好理解就是塊級網(wǎng)格...

firim 2019-08-29 13:58 評論0 收藏0
[譯] Grid 布局完全指南

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

Baoyuan 2019-08-30 15:52 評論0 收藏0
面試寶典

摘要：有談談面試與面試題對于前端面試的一些看法。動態(tài)規(guī)劃算法的思想及實現(xiàn)方法幫大家理清動態(tài)規(guī)劃的解決思路以及原理方法前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。極客學院前端練習題道練習題，面試季練練手。由數(shù)據(jù)綁定和排序引入的幾個 JavaScript 知識點在 JavaScript 的數(shù)據(jù)綁定和做簡單的表格排序中遇到的幾個知識點 [[JS 基礎...

neu 2019-08-29 14:00 評論0 收藏0
有關css柵格系統(tǒng)的故事

摘要：下面，本文將介紹幾個比較有代表性的柵格樣式庫，講述它們的簡要原理和用法正確的打開方式。雖然柵格樣式庫很棒，但它們并不是響應式設計的全部。但在這個過程中，理解各類柵格樣式庫的工作原理，正確使用它們，才能做出穩(wěn)定可靠的頁面結(jié)構(gòu)。說到柵格系統(tǒng)（grid system），你也許見過這樣的概念： showImg(https://segmentfault.com/img/bVmQnO); 像這樣...

legendaryedu 2019-08-28 18:12 評論0 收藏0
前端入門24-響應式布局（BootStrap）

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

lunaticf 2019-04-23 13:06 評論0 收藏0