css中网格布局的案例分析

小编给大家分享一下css中网格布局的案例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

css网格布局(又称“网格”),是一种二维网格布局系统。css在处理网页布局方面一直做的不是很好。一开始我们用的是表(表)格布的局,然后用浮子(浮动)、位置(定位)和inline-block(行内块)布的局,但是这些方法本质上是黑客,遗漏了很多功能,例如垂直居中。后来出了flexbox盒布的局,解决了很多布局问题,但是它仅仅是一维布的局,而不是复杂的二维布的局,实际上它们(flexbox与网格)能很好的配合使用。

浏览器支持情况

在我们开始正式学习网格布局之前,先看一下我能用上网格布局在各个浏览器下的支持情况是很有用的,

基本概念

要想学网格布好局的用法,基本概念的介绍是少不了的,虽然看起来比较枯燥。

网格容器(网格容器)

通过显示属性设置属性值为网格或inline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目(网格项目)

网格线(网格线)

组成网格线的分界线。它们可以是列网格线(列网格线),也可以是行网格线网格线(行)并且居于行或列的任意一侧

网格轨道(网格跟踪)

两个相邻的网格线之间为网格轨道。你可以认为它们是网格的列或行

网格单元(网格单元)

两个相邻的列网格线和两个相邻的行网格线组成的是网格单元,它是最小的网格单元

网格区(网格,区)

网格区是由任意数量网格单元组成

基本属性及作用

一个简单例子

要介绍网格布局属性,让我们先从一个简单例子开始:

如上图所示,如果我们要实现一个3 x3的正方形矩阵,用网格布局要怎么实现?