美文网首页
grid真香系列

grid真香系列

作者: 压缩干粮 | 来源:发表于2020-06-18 18:37 被阅读0次
1 .display:grid
  • 设为网格布局以后,容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

grid-template-columns 定义了每一列宽度,grid-template-rows规定了每一行的宽度

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
或者
.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

效果图:


image.png
2 . repeat()

接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值。
上面的代码可以简化为:

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
3 .auto-fill关键字

有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
image.png
4.fr关键字

为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。

.container{
    display:grid;
    grid-template-columns:1fr 1fr
}
5 .minmax()

minmax产生一个长度范围,接受两个值,一个是最大值,一个是最小值

grid-template-columns:1fr 1fr minmax(100px ,1fr)
// minmax表示不小于100px  ,不大于1fr
6 . 布局实例
.wrapper{
       display:grid;
       grid-template-columns:70% ,30%
}

上面代码将左边栏设为70%,右边栏设为30%。

7 . grid-row-gap 、grid-column-gap 、 grid-gap

grid-row-gap设置行间距
grid-column-gap 设置列间距
grid-gap 是grid-column-gap和grid-row-gap的简写

8 . grid-template-areas属性
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a a a'
                       'd e f'
                       'g h i';
}
.header{
    grid-area:a
}
.content-left{
    grid-area:d
}
.content-left{
    grid-area:d
}
.content-center{
    grid-area:e
}
.content-right{
    grid-area:f
}

相关文章

  • grid真香系列

    1 .display:grid 设为网格布局以后,容器子元素(项目)的float、display: inline-...

  • CSS Grid 布局

    参考资料 CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 系列(上)-Grid布局完...

  • 真香系列

    王者荣耀不好玩,没意思——天天玩到半夜 QQ飞车过时了——天天玩到半夜 泡泡龙小孩子玩的——不得第一不罢休 我不喜...

  • WPF布局缓冲颜色

    ...

  • css grid网格布局

    display: grid; display: inline-grid; grid-template-column...

  • 拼多多真香系列

    我是一向爱吃水果的人,回家之后,收入骤减,连爱吃水果的自由都没有了。大家都说拼多多比淘宝便宜,那我也开始转站拼多多...

  • Grid布局相关属性

    定义display:grid或inline-grid开启子元素的Grid布局。 不同于flex布局,grid布局是...

  • Flutter GetX真香

    Flutter GetX真香系列。在生产环境已使用半年,使用GetX真正实现View和Controller分离,同...

  • 了解 Xamarin.Forms 创建移动应用程序的基础知识 2

    简介 演示如何在 Grid 中布局。 在 XAML 中创建 Xamarin.Forms Grid。 指定 Grid...

  • 2019-01-15

    一、 栅格Grid 栅格定义 Grid Container最外围,利用display定义为grid,相对应的子类为...

网友评论

      本文标题:grid真香系列

      本文链接:https://www.haomeiwen.com/subject/jcvuxktx.html