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 网格布局教程 —— 阮一峰