CSS教程

CSS Grid布局(一)

本文主要是介绍CSS Grid布局(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

学习小程序时学习过Flex布局,Grid和Flex有一些相似,都可以指定容器复杂的排列布局。


容器和项目

容器----container (#app就是容器)
项目----item (.section就是项目)

<div id="app">
 	<section class="section"></section>
 	<section class="section"></section>
 	<section class="section"></section>
</div>

行和列

容器里面的水平区域称为"行"(row)
垂直区域称为"列"(column)


单元格

行和列的交叉区域,称为"单元格"(cell)
行数*列数=单元格数量


网格线

划分网格的线,称为"网格线"(grid line)
水平网格线划分出行,垂直网格线划分出列

正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线
比如三行就有四根水平网格线


容器属性

1.Grid 布局的属性分成两类

  • 容器属性
  • 项目属性

1.1 容器属性------display属性

display: grid指定一个容器采用网格布局

#app{
	display:grid
}

默认情况下,容器元素都是块级元素,但也可以设成行内元素

#app{
	display:inline-grid
}

1.2 容器属性------grid-template-columns、 grid-template-rows 属性

  • grid-template-columns 属性定义每一列的列宽
  • grid-template-rows 属性定义每一行的行高
#app{
	display:grid;
	grid-template-columns: 100px 100px 100px;
   grid-template-rows: 100px 100px 100px;
}
1.2.1 repeat()

repeat()接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。

#app{
	display:grid;
	grid-template-columns: repeat(3, 33.33%);
   grid-template-rows: repeat(3, 33.33%);
}

grid-template-columns: repeat(2, 100px 20px 80px);
1.2.2 auto-fill 关键字 自动填充

每列宽度100px,然后自动填充,直到容器不能放置更多的列

#app{
	display:grid;
	grid-template-columns: repeat(auto-fill, 100px);
}
1.2.3 fr 关键字 比例关系

fraction 的缩写,意为"片段"
如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍

#app{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

//第一列的宽度为150像素,第二列的宽度是第三列的一半
grid-template-columns: 150px 1fr 2fr;

1.2.4 minmax() 一个长度范围

它接受两个参数,分别为最小值和最大值

minmax(100px, 1fr)表示列宽不小于100px,不大于1fr

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1.2.5 auto 关键字 由浏览器自己决定长度

第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width
且这个值大于最大宽度。

grid-template-columns: 100px auto 100px;
1.2.6 网格线的名称

grid-template-columns属性和grid-template-rows属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。

#app{
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

网格布局允许同一根线有多个名字,比如[fifth-line row-5]

1.2.7 布局实例

两栏式布局

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

十二网格布局
grid-template-columns: repeat(12, 1fr);


1.3容器属性------grid-row-gap、 grid-column-gap、grid-gap 属性

  • grid-row-gap 设置行与行的间隔(行间距)
  • grid-column-gap 设置列与列的间隔(列间距)
  • grid-gap 是grid-column-gap和grid-row-gap的合并简写形式
#app{
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}


#app{
	grid-gap: 20px 20px;
}

1.4 grid-template-areas 属性

网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成
grid-template-areas属性用于定义区域

#app {
  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';
}

1.5 grid-auto-flow 属性

grid-auto-flow属性除了设置成row和column
还可以设成row dense和column dense


1.6 justify-items 、align-items 、place-items 属性

  • justify-items属性设置单元格内容的水平位置(左中右)
  • align-items属性设置单元格内容的垂直位置(上中下)
  • place-items属性是align-items属性和justify-items属性的合并简写形式
#app{
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

place-items: start end;

1.7 justify-content 、align-content 、place-content 属性

  • justify-content属性是整个内容区域在容器里面的水平位置(左中右)
  • align-content属性是整个内容区域的垂直位置(上中下)。
  • place-content属性是align-content属性和justify-content属性的合并简写形式
#app {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  

//或者
  place-content: space-around space-evenly;
}


这篇关于CSS Grid布局(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!