五款css布局工具，大大減少你寫代碼的時(shí)間

個(gè)有用的 CSS 布局生成器

1、 cssgr.id

如果你是前端開發(fā)人員，這是一個(gè)非常有用的網(wǎng)站。你可以首先指定所需的行數(shù)和列數(shù)，或者在給定的選項(xiàng)中進(jìn)行選擇，然后為其生成代碼。這使你可以專注于設(shè)計(jì)的其他方面而不是布局。

2、csslayout.io

有多種選擇可供選擇，這個(gè)網(wǎng)站是一個(gè)隱藏的寶石。有 102 種模式可供選擇，這讓我們的工作更輕松，令人贊嘆。如果你是前端開發(fā)人員，你一定要看看這個(gè)網(wǎng)站，你會(huì)對(duì)可用的選項(xiàng)范圍感到驚訝。

3、Loading.io

Flexbox 現(xiàn)在非常有用，但有時(shí)再次測(cè)試時(shí)，它的一些屬性會(huì)很令人沮喪。CSS Flexbox 布局功能強(qiáng)大而復(fù)雜。所以這里有一個(gè)快速的 flexbox 游樂場(chǎng)，用于使用 flex 布局技巧測(cè)試你的 CSS。

4、CSS grid-generator

使用這個(gè)網(wǎng)站，你可以設(shè)置數(shù)字、列和行的單位，它會(huì)為你生成一個(gè) CSS 網(wǎng)格！在框內(nèi)拖動(dòng)以創(chuàng)建放置在網(wǎng)格內(nèi)的 div。

5、grid. layout

網(wǎng)站上提供了默認(rèn)布局，可以根據(jù)我們的需要進(jìn)行修改并生成代碼。用戶可以更改行數(shù)、列數(shù)、行間距、列間距等，也可以指定對(duì)齊方式。

如果你是初學(xué)者，請(qǐng)嘗試使用這些網(wǎng)站在一些幫助下自己編寫代碼，而不僅僅是復(fù)制粘貼它們。下次你開發(fā)漂亮的網(wǎng)站時(shí)，希望你利用這些工具網(wǎng)站并享受設(shè)計(jì)的樂趣。

家好，我是Echa。

又到周五啦，提前祝大家周末愉快！今天來分享一些實(shí)用的前端工具！

1. Small Dev tools

Small Dev Tools 是一個(gè)前端工具網(wǎng)站，包含了很多實(shí)用的功能，比如JSON解碼器、JSON格式化程序、UTF8編碼、Base64編碼、Base64解碼、CSS格式化程序、CSS壓縮器等。

官網(wǎng)：https://smalldev.tools/

2. Carbon

Carbon 是一個(gè)在線工具，可以生成漂亮的不同風(fēng)格的代碼圖片。

官網(wǎng)：https://carbon.now.sh/

3. UI Design Daily

UI 設(shè)計(jì)日?qǐng)?bào)，提供免費(fèi)優(yōu)質(zhì)的 UI 資源。

官網(wǎng)：https://www.uidesigndaily.com/

4. Color Hunt

ColorHunt，即顏色獵人，是一個(gè)在線設(shè)計(jì)配色的網(wǎng)站，其最大的特點(diǎn)就是使用飽和度調(diào)配配色方案。每天會(huì)根據(jù)瀏覽量進(jìn)行更新排版，并可以直接使用。

官網(wǎng)：https://colorhunt.co/

5. SCHEME COLOR

SCHEME COLOR 是一個(gè)在線的配色工具網(wǎng)站，可以根據(jù)顏色、類型等查找合適的配色方案。

官網(wǎng)：https://www.schemecolor.com/

6. Keyframes

Keyframes 可以用來創(chuàng)建動(dòng)畫、陰影和使用顏色，幫助我們編寫更好的CSS。

官網(wǎng)：https://keyframes.app/

7. Design Resources

Design Resources 是一個(gè)設(shè)計(jì)資源的集合。

官網(wǎng)：https://www.designresourc.es/

8. Omatsuri

Omatsuri 是一個(gè)開源項(xiàng)目，包含12個(gè)實(shí)用的前端工具。

官網(wǎng)：https://omatsuri.app/

9. UI Snippets

UI Snippets 是一個(gè)前端動(dòng)畫合集，可以通過右鍵點(diǎn)擊想要的動(dòng)畫直接復(fù)制對(duì)應(yīng)的 CSS 或 SCSS 代碼。

官網(wǎng)：https://ui-snippets.dev/

10. Pattern CSS

Pattern CSS 可以用漂亮的圖案填充空白背景。

官網(wǎng)：https://bansal.io/pattern-css

11. Can I use

Can I use 可以用來查詢 HTML5、CSS、JS、SVG 在各種流行瀏覽器中的特性和兼容性。

官網(wǎng)：https://caniuse.com/

12. CSS Gradient

CSS Gradient 是一個(gè)用來快速方便的創(chuàng)建 CSS 漸變的網(wǎng)站。

官網(wǎng)：https://cssgradient.io/

13.CSS matic

CSS matic 是一個(gè) CSS 工具，目前包含4個(gè)很有用的工具，分別是：支持各種顏色和透明度的漸變工具，使用漸變工具，可以創(chuàng)建漸變平滑的色彩變化效果和微妙的透明膠片；邊框圓角工具可以幫助你方便的實(shí)現(xiàn)需要的圓角效果；噪聲紋理可以幫助你創(chuàng)造奇妙的背景圖案，能夠?qū)崟r(shí)預(yù)覽結(jié)果；盒陰影工具可以控制模糊半徑的變化，顏色變化，陰影大小，可以實(shí)現(xiàn)你想要的任何效果。

官網(wǎng)：https://www.cssmatic.com/

14.Am I Responsive

Am I Responsive 用來測(cè)試響應(yīng)式網(wǎng)頁。輸入鏈接即可生成預(yù)覽，Am I Responsive 能幫我們測(cè)試出頁面在手機(jī)、平板電腦、筆記本電腦和桌面端設(shè)備上的瀏覽體驗(yàn)。

官網(wǎng)：http://ami.responsivedesign.is/

15. CSS Generator

這是一個(gè)實(shí)用的 CSS 生成器，可以實(shí)時(shí)查看調(diào)試效果。

官網(wǎng)：https://html-css-js.com/css/generator/

16. My Brand New Logo

My Brand New Logo 是一個(gè)CSS 調(diào)色板生成器，用來創(chuàng)建一致的調(diào)色板方案。

官網(wǎng)：https://mybrandnewlogo.com/color-palette-generator

17. 裁剪路徑生成器

CSS cli-path 功能能夠構(gòu)建復(fù)雜的形狀，該工具讓我們可以輕松地以交互方式構(gòu)建該多邊形。

官網(wǎng)：https://bennettfeely.com/clippy/

18. CSS Grid Generator

CSS Grid Generator 是一個(gè) Grid 布局生成器，通過這個(gè)工具可以快速創(chuàng)建自定義CSS Grid布局。

官網(wǎng)：https://cssgrid-generator.netlify.app/

19. CSS Layout Generator

CSS Layout Generator 布局生成器可以為布局組件創(chuàng)建 CSS 和 HTML 的工具。

官網(wǎng)：https://layout.bradwoods.io/

20. Fluid-responsive font-size calculator

Fluid-responsive font-size calculator 即響應(yīng)式字體計(jì)算器，可以輕松創(chuàng)建流暢的排版體驗(yàn)。它有更廣泛的支持，可以用幾行 CSS 來實(shí)現(xiàn)。

官網(wǎng)：https://websemantics.uk/tools/responsive-font-calculator/

21. regex101

Regex101是學(xué)習(xí)、測(cè)試正則表達(dá)式的工具網(wǎng)站。

官網(wǎng)：https://regex101.com/

22. Regex-Vis

Regex-Vis 是一個(gè)正則表達(dá)式可視化器和編輯器。

官網(wǎng)：https://regex-vis.com/

23. Loupe

Loupe 是一個(gè)可視化工具，可幫助我們了解 JavaScript 的調(diào)用堆棧/事件循環(huán)/回調(diào)隊(duì)列是如何執(zhí)行的。

官網(wǎng)：http://latentflip.com/loupe/

24. RunJS

RunJS 是一個(gè)桌面應(yīng)用程序，可幫助我們編寫專門的 Javascript 和 Typescript 代碼。它的一些優(yōu)勢(shì)是可以快速測(cè)試代碼，輕松導(dǎo)入和測(cè)試庫代碼，并且能夠修改界面、主題和字體以適應(yīng)偏好。

官網(wǎng)：https://runjs.dev/

25. Wrap SVG Online

Wrap SVG Online 通過拖放從計(jì)算機(jī)上傳圖像，可以輕松地編輯網(wǎng)頁的 SVG 圖像。

官網(wǎng)：https://pavellaptev.github.io/warp-svg/

26. SVG Path Visualizer

SVG Path Visualizer 可以幫助我們通過輸入 SVG 路徑數(shù)據(jù)來快速直觀地查看 SVG 圖像。此外，該工具還提供了詳細(xì)的說明，以便了解如何創(chuàng)建基本的 SVG 形狀，如直線、曲線、三角形等。

官網(wǎng)：https://svg-path-visualizer.netlify.app/

27. BGJar

BGJar 是一個(gè)在線工具，可以輕松快速地為網(wǎng)站創(chuàng)建 SVG 背景。只需編輯必要的信息，它將自動(dòng)導(dǎo)出圖像或代碼供我們應(yīng)用到網(wǎng)站。

官網(wǎng)：https://bgjar.com/

28. Wavesnippets

Wavesnippets 可以將代碼分步設(shè)置為動(dòng)畫、視頻或 GIF。

官網(wǎng)：https://www.wavesnippets.com/

29. Generate SVG Waves

Generate SVG Waves 可以用來創(chuàng)建 SVG 波形背景。

官網(wǎng)：https://svgwave.in/

30. CodeSandbox

CodeSandbox 是一個(gè)為 Web 應(yīng)用程序開發(fā)而構(gòu)建的在線編輯器，支持多種主流框架。

官網(wǎng)：https://codesandbox.io/

31. Openbase

Openbase 幫助開發(fā)人員在數(shù)以百萬計(jì)的開源軟件包中進(jìn)行選擇和使用。

官網(wǎng)：https://openbase.com/

32. CodePen

CodePen 是一個(gè)在線的前端代碼編輯工具，可用于制作測(cè)試頁面、代碼調(diào)試，所見即所得。

官網(wǎng)：https://codepen.io/

33. JSONLint

JSONLint 是一個(gè) JSON 調(diào)試工具，如果遺漏了語法中的某些內(nèi)容，它會(huì)進(jìn)行檢查。JSONLint 是處理大型 JSON 格式的絕佳工具，而且很容易上手。

官網(wǎng)：https://jsonlint.com/

34. Minify

Minifier 可以對(duì) JavaScript 和 CSS 代碼進(jìn)行壓縮，通過縮小可以提高網(wǎng)站加載速度。Minifier 通過刪除 .js 和 .css 文件中的空白并重新格式化它們以減小大小。

官網(wǎng)：https://www.minifier.org/

35. Unminify

Unminify 和 Minifier 恰恰相反。使用 Unminify 可以使 .js 或 .css 文件可讀。這兩種工具都非常容易使用。

官網(wǎng)：https://unminify.com/

36. CRADIENT.ART

CRADIENT.ART 是一個(gè)高級(jí) CSS 漸變編輯器，使用帶有分層、設(shè)計(jì)工具和免費(fèi)云存儲(chǔ)的功能豐富的編輯器設(shè)計(jì)插圖、圖案、圖標(biāo)等。

官網(wǎng)：https://gra.dient.art/

37. 3DPop

3DPop 可以使用 CSS 生成很棒的 3D 文本效果。

官網(wǎng)：https://textpop3d.web.app/

38. CSS Photo Filters

CSS Photo Filters 是一個(gè)CSS圖片濾鏡工具，提供了 36 個(gè) CSS 過濾器供我們使用。

官網(wǎng)：https://baseline.is/tools/css-photo-filters/

面我學(xué)習(xí)了Flex布局之后感覺是真的爽啊，比之前用浮動(dòng)，定位方便太多了，之前幾十行代碼才能寫完的布局，用了Flex10行左右就搞定了，今天學(xué)了Grid發(fā)現(xiàn)比Flex更爽，代碼寫的還要少，真是太厲害了，現(xiàn)在我把學(xué)習(xí)的相關(guān)知識(shí)梳理了一下，給大家分享一下，同時(shí)也可以作為我日后復(fù)習(xí)的筆記。

一、認(rèn)識(shí)Grid屬性

1.Grid容器屬性：

屬性說明：

grid-template-columns 軌道列寬

grid-template-rows 軌道行高

gap 軌道間距

grid-auto-columns 隱式軌道的列寬

grid-auto-rows 隱式軌道的行高

grid-auto-flow 隱式軌道排列方式，默認(rèn)行優(yōu)先

1.認(rèn)識(shí)網(wǎng)格容器/網(wǎng)格項(xiàng)目/網(wǎng)格軌道/軌道間距

首先我們寫出一個(gè)html結(jié)構(gòu)，聲明它的樣式為網(wǎng)格布局：display:grid;

<div class="container">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>

效果圖：

由此可見，之前的span元素為行內(nèi)元素，在聲明了網(wǎng)格布局之后，全部變?yōu)榱藟K元素。
與之前的flex布局不一樣，flex布局是行內(nèi)元素。

以下是創(chuàng)建了一個(gè)2行3列的布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>網(wǎng)格容器/網(wǎng)格項(xiàng)目/網(wǎng)格軌道/軌道間距</title>
    <style>
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            grid-template-columns: auto;
            grid-template-columns: 10em 10em auto;
            grid-template-rows: 5em 5em;
            gap: 0.5em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>
</html>

效果圖：

通過上述案例我可以學(xué)習(xí)到網(wǎng)格布局的相關(guān)屬性用法：

使用display: grid;聲明一個(gè)網(wǎng)格布局，其中.container稱為網(wǎng)格容器，其子元素span稱為網(wǎng)格項(xiàng)目。
設(shè)置軌道的列寬：grid-template-columns：10em 10em auto，意思是聲明了一個(gè)三列的網(wǎng)格布局，auto表示剩下的布局自適應(yīng)。
設(shè)置軌道的行高：grid-template-rows：5em 5em，意思是聲明了一個(gè)兩行的網(wǎng)格布局，高度都是5em
設(shè)置軌道的間距：gap: 0.5em 0.5em，聲明了軌道之間的間距，可以簡(jiǎn)寫成gap:0.5em。
網(wǎng)格項(xiàng)目：網(wǎng)格容器中的“子元素”，與flex是一樣的，默認(rèn)生成一列N行的容器（N就是項(xiàng)目的數(shù)量）。

總結(jié)：

網(wǎng)格容器：由若干個(gè)矩形網(wǎng)格單元構(gòu)成；
網(wǎng)絡(luò)項(xiàng)目：網(wǎng)格容器的子元素，必須放在網(wǎng)格單元中；
網(wǎng)格單元：有“單元格”和“網(wǎng)格區(qū)域”兩種表現(xiàn)形式；
網(wǎng)格軌道：由多個(gè)網(wǎng)格單元組成，根據(jù)排列方向有“行軌”和“列軌”之分；
軌道間距：容器中軌道之間的間距,有"行軌間距","列軌間距"。

2.自定義項(xiàng)目屬性：

grid-area語法：grid-row-start / grid-column-start / grid-row-end / grid-column-end;

編號(hào)從左上角開始（1,1）并且是遞增的。

相關(guān)屬性說明：

grid-row-start 項(xiàng)目的起始行；
grid-column-start 項(xiàng)目的起始列；
grid-row-end 項(xiàng)目的結(jié)束行；
grid-column-end 項(xiàng)目的結(jié)束列。

2.自定義項(xiàng)目在容器中的顯示位置

首先，還是先創(chuàng)建一個(gè)網(wǎng)格布局的html結(jié)構(gòu)：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
</div>

給出以下樣式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 軌道列寬 */
    grid-template-columns: repeat(3, 1fr);
    /* 軌道行高 */
    grid-template-rows: 5em 5em;
    /* 行優(yōu)先時(shí)要設(shè)置隱式軌道的行高 */
    grid-auto-rows: 5em;
    /* 軌道間距 */
    gap: 0.5em 1em;
}

.container > .item {
    background-color: lightcyan;
    border: 1px solid #000;
    padding: 0.5em;
}
</style>

效果圖：

現(xiàn)在我們以第5個(gè)項(xiàng)目來舉例，將它移動(dòng)到第一個(gè)網(wǎng)格單元中：

<style>
.container .item:nth-of-type(5) {
    background-color: lightyellow;
    /* item5的默認(rèn)位置 */
    grid-area: 2 / 2 / 3 / 3;
    /* 將它放入到第一個(gè)網(wǎng)格單元中 */
    grid-area: 1 / 1 / 2 / 2;
}
</style>

由于默認(rèn)項(xiàng)目是跨越一行一列的，所以可以簡(jiǎn)寫成下面的格式：

grid-area: 1 / 2;

效果圖：

但是，如果是跨越1行1列以上的，就不能省略了。例如要跨越2行3列，就必須寫成下面的格式：

grid-area: 1 / 1 / 3 / 4;

通常的情況是我們只關(guān)心跨越幾行幾列，并不關(guān)心它的結(jié)束行號(hào)，所以還可以這樣寫：

grid-area: 1 / 1 / span 2 / span 3;

所以，上述兩種寫法的效果是一樣的。

效果圖：

再以第1個(gè)項(xiàng)目為例，有如下樣式：

<style>
    /* 添加一個(gè)淺綠色背景便于區(qū)分 */
    background-color: lightgreen;
    /* 默認(rèn)位置 */
    grid-area: 1 / 1 / 2 / 2;
</style>

效果圖：

如果現(xiàn)在要跨1行3列，可以寫成如下格式：

grid-area: 1 / 1 / span 1 / span 3;

因?yàn)閕tem1默認(rèn)的位置是1 / 1，所以上述樣式可以簡(jiǎn)寫成：

grid-area: span 1 / span 3;

之前說過，項(xiàng)目默認(rèn)的是跨1行1列，所以，可以簡(jiǎn)寫成如下格式：

grid-area: auto / span 3;

由以上案例可以得出結(jié)論：

grid-area：參數(shù)數(shù)量不同，意義不同

1. 值中只有span

單值：跨的行數(shù)。
雙值：跨的行與列數(shù)，如果只想設(shè)置列數(shù)，就必須設(shè)置行數(shù)（auto—）。

2. 值中有span和編號(hào)

雙值：沒有span，默認(rèn)跨1行1列，grid-area： 2 / 3；
2.2 三值：省略列結(jié)束編號(hào)或跨的數(shù)量，此時(shí)前面的值可使用auto；
2.3 四值：最完整的語法。

3.網(wǎng)格單元尺寸的新單位：fr
設(shè)置軌道寬度時(shí)可以用一個(gè)新單位:fr(fraction)，類似于flex中的伸縮因子。

現(xiàn)有如下網(wǎng)格布局：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
</div>

給出如下樣式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 軌道列寬 */
    grid-template-columns: 10em 10em 10em;
    /* 軌道行高 */
    grid-template-rows: 5em 5em;
    /* 軌道間距 */
    gap: 0.5em;
}
</style>

效果圖：

此時(shí)我們可以在設(shè)置軌道寬度的時(shí)候使用一個(gè)新單位：fr（fraction），類似于flex的伸縮因子

grid-template-columns: auto auto auto;

效果圖：

以上屬性設(shè)置了一個(gè)自適應(yīng)的3列等寬的布局，如果現(xiàn)在出現(xiàn)一個(gè)新的需求，中間一列的寬度是兩邊的二倍，那么auto就無法滿足了，但是fr可以完美解決這個(gè)問題：

grid-template-columns: 1fr 2fr 1fr;

效果圖：

總結(jié)：

% 與 fr可以共存，計(jì)算方式：總寬度減去百分比寬度，剩下的寬度都分給fr；
px是固定的，em也是固定的，計(jì)算時(shí)要減去這些固定值，將剩下的空間都分給fr；
auto，fr，% 都是相對(duì)單位，都可以觸發(fā)自動(dòng)計(jì)算機(jī)制，盡可能不要同時(shí)出現(xiàn)；
auto 與 px，em同時(shí)使用會(huì)自動(dòng)計(jì)算。

4.網(wǎng)格單元尺寸的常用函數(shù)：repeat(),minmax()

還是跟上面案例一樣的初始樣式，現(xiàn)在如果我要設(shè)置一個(gè)3列10em寬度的布局，可以利用repeat()函數(shù)這樣寫：

grid-template-columns: repeat(3, 10em);

等價(jià)于下面的寫法：

grid-template-columns: 10em 10em 10em;

repeat()的第二個(gè)參數(shù)可以是多個(gè)值

grid-template-columns: repeat(3, 10em 2em);

等價(jià)于下面的寫法：

grid-template-columns: 10em 2em 10em 2em 10em 2em;

repeat()函數(shù)還可以與fr混合使用：

grid-template-columns: repeat(2, 1fr) 2fr;

等價(jià)于下面的寫法：

grid-template-columns: 1fr 1fr 2fr;

3.minmax()函數(shù)

中間列，最小寬度是20em，最大寬度是左右的2倍

grid-template-columns: 1fr minmax(20em, 2fr) 1fr;

效果圖：

grid-template-columns: 20em minmax(20em, 1fr);

效果圖：

當(dāng)使用1fr時(shí)，auto效果也一樣，即使寫成5fr也是可以的。

grid-template-columns: 20em minmax(20em, 1fr);

grid-template-columns: 20em minmax(20em, 5fr);

grid-template-columns: 20em minmax(20em, auto);

以上三種寫法效果完全一樣。

效果圖：

5.網(wǎng)格單元的排列方式與隱式軌道

現(xiàn)有如下的html結(jié)構(gòu)和樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>網(wǎng)格單元的排列方式與隱式軌道</title>
    <style>
        /* 網(wǎng)格容器 */
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            display: grid;
            /* 軌道列寬 */
            grid-template-columns: repeat(3, 1fr);
            /* 軌道行高 */
            grid-template-rows: 5em 5em;
            /* 軌道間距 */
            gap: 0.5em 1em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>
</body>
</html>

效果圖：

此時(shí)聲明的網(wǎng)格單元數(shù)量已經(jīng)不夠存放網(wǎng)格項(xiàng)目了，多出的三個(gè)項(xiàng)目會(huì)自動(dòng)放入到自動(dòng)生成的網(wǎng)格空間中了,這時(shí)，原來聲明的網(wǎng)格單元叫做：顯示軌道，新項(xiàng)目顯示的軌道稱為：隱式軌道。

此時(shí)，默認(rèn)項(xiàng)目在容器中按照先行后列的順序排列，即：“行優(yōu)先”。

grid-auto-flow: row;

自動(dòng)生成的隱式軌道的高度是自動(dòng)的，因此，行優(yōu)先時(shí)要設(shè)置隱式軌道的行高。

grid-auto-rows: 5em;

效果圖：

列優(yōu)先時(shí)，需要設(shè)置隱式軌道的列寬：

grid-auto-flow: column;
grid-auto-columns: 1fr;

效果圖：

以上就是Grid布局的基本知識(shí)，個(gè)人感覺難度不是很大，就是屬性有點(diǎn)多，需要花時(shí)間去牢記，多寫一些布局，模仿一些網(wǎng)站這樣對(duì)于掌握這些知識(shí)會(huì)有很大的幫助，這兩天準(zhǔn)備學(xué)習(xí)完Flex和Grid布局之后仿一個(gè)京東手機(jī)端的頁面練練手。

如果有跟我一樣才學(xué)習(xí)這些基礎(chǔ)知識(shí)的朋友大家可以相互交流一下。

在線咨詢

上一篇：前端入門-html 表單控件使用
下一篇：web前端入門JavaScript筆記二

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

五款css布局工具，大大減少你寫代碼的時(shí)間

1. Small Dev tools

2. Carbon

3. UI Design Daily

4. Color Hunt

5. SCHEME COLOR

6. Keyframes

7. Design Resources

8. Omatsuri

9. UI Snippets

10. Pattern CSS

11. Can I use

12. CSS Gradient

13.CSS matic

14.Am I Responsive

15. CSS Generator

16. My Brand New Logo

17. 裁剪路徑生成器

18. CSS Grid Generator

19. CSS Layout Generator

20. Fluid-responsive font-size calculator

21. regex101

22. Regex-Vis

23. Loupe

24. RunJS

25. Wrap SVG Online

26. SVG Path Visualizer

27. BGJar

28. Wavesnippets

29. Generate SVG Waves

30. CodeSandbox

31. Openbase

32. CodePen

33. JSONLint

34. Minify

35. Unminify

36. CRADIENT.ART

37. 3DPop

38. CSS Photo Filters

一、認(rèn)識(shí)Grid屬性

1.認(rèn)識(shí)網(wǎng)格容器/網(wǎng)格項(xiàng)目/網(wǎng)格軌道/軌道間距

2.自定義項(xiàng)目在容器中的顯示位置

1. 值中只有span

2. 值中有span和編號(hào)

3.minmax()函數(shù)

您的項(xiàng)目需求

五款css布局工具，大大減少你寫代碼的時(shí)間

一、認(rèn)識(shí)Grid屬性