grid佈局入門

時間 2019-12-05

標籤 grid 佈局入門简体版

原文原文鏈接

以前咱們講過flex佈局在實際項目中開發，今天咱們來看看另外一個新佈局grid——網格佈局

用過UI框架的童鞋必定對網格佈局不陌生，大部分UI框架裏都有。element layout佈局、ant design grid佈局

本次介紹只會介紹一些經常使用屬性

容器屬性

grid佈局

<!DOCTYPE html>
<html lang="en">
<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> .container{ display: grid; } </style>
</head>
<body>
    <div class="container">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span> 
    </div>
</body>
</html>
複製代碼

打開chrome調試咱們看到css

也能夠變成行內 display:inline-gridhtml

grid-template-columns && grid-template-rows

1.grid-template-columns定義列屬性chrome

.container{
    display: grid;
    grid-template-columns: 100px 100px 100px;
}
複製代碼

2.grid-template-rows定義行屬性bash

.container{
    display: grid;
    grid-template-rows: 100px 100px 100px;
}
複製代碼

grid-template-columns && grid-template-rows相關其餘屬性

(1).寬度高度可使用百分比框架

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
複製代碼

(2).repeat() 使用repeat()能夠少些重複的寬高例如：佈局

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
複製代碼

重複的值能夠是多個數值學習

grid-template-columns: repeat(2, 100px 20px 80px);
複製代碼

將多個元素當作一個總體 (3).fr 關鍵字相似於vw、vh 1vw爲寬度的1% 1r能夠看作是50%flex

grid-gap grid-gap爲網格之間的寬度 grid-gap屬性是grid-column-gap和grid-row-gap的合併簡寫形式

grid-gap: <grid-row-gap> <grid-column-gap>;
複製代碼

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px 20px;
}
複製代碼

grid-template-areas 能夠經過自命名來規定每行塊

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}
複製代碼

上面的寫法grid-template-areas裏的內容名稱可隨便定義，能夠相同，每行不限於個數ui

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a a a a'
        'd d d d'
        'g g g g';
}
複製代碼

須要注意的是grid-template-columns和grid-template-rows定義時個數若是大於grid-template-areas定義每列的個數，會顯示grid-template-columns定義的個數spa

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a a'
        'd d'
        'g g';
}
複製代碼

grid-auto-flow

排列的順序，默認row先行再列，column先列後行

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a a a'
        'd d d'
        'g g g';
    grid-auto-flow: column;
}
複製代碼

place-items place-items爲justify-items和align-items縮寫對齊方式 1.justify-items 一個內元素水平位置 2.align-items 一個內元素垂直位置
place-content

place-items爲justify-content和align-content縮寫

justify-content grid塊在容器的水平位置
justify-content grid塊在容器的垂直位置

內部屬性

<!DOCTYPE html>
<html lang="en">
<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> .container { display: grid; } .item{ } </style>
</head>
<body>
    <div class="container">
        <span class="item">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
    </div>
</body>
</html>
複製代碼

item定在網格哪一個網格

grid-column-start屬性：左邊框所在的垂直網格線 grid-column-end屬性：右邊框所在的垂直網格線 grid-row-start屬性：上邊框所在的水平網格線 grid-row-end屬性：下邊框所在的水平網格線

.item {
  grid-column-start: 2;
  grid-column-end: 4;
}
複製代碼

span關鍵詞表示佔幾個網格

.item {
  grid-column-start: span 2;
}
複製代碼

grid-area

放在哪一個區域（很是好用）

.container {
    display: grid;
    grid-template-areas: 'a b c'
                        'd e f'
                        'g h i'
}
.item{
    grid-area: e
}
複製代碼

把item-1放在了areas定義e的位置

place-self

place-self是align-self屬性和justify-self屬性的縮寫

justify-self 單格內容水平位置
align-self 單格內容垂直位置

.container {
    display: grid;
    grid-template-areas: 'a b c'
                        'd e f'
                        'g h i'
}
.item{
   grid-area: e;
   place-self: center center;
}
複製代碼

一些經常使用的屬性，大體學習了一遍，項目中使用更多的仍是看文檔比較全面

CSS Grid 網格佈局教程 —— 阮一峯

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。