阅读 77

css网格布局(display: grid | inline-grid)

css网格布局是css中最强大的布局系统。它是一个二维系统,这意味着它可以处理列和行,不像flexbox主要是一维系统。通过css规则应用于父元素(成为网格容器)和该元素的子元素(网格项),您可以使用网格布局。


介绍

css网格布局(又名“网格”)是一种基于网络的二维布局系统,旨在完全改变我们设计基于网格的用户界面的方式。css一直被用来布局我们的网页,但它从未做过很好的工作。比如使用表格table,浮动float,定位position等,都很容易出现一些遗漏的功能和问题。譬如垂直居中。flexbox虽然对这样情况有所帮助,但它只是适用于更简单但一维布局,而不是复杂的二维布局(flexbox和grid实际上可以很好的协同工作,简化我们的css代码)。grid是第一个专门解决布局问题的css模块,只要我们一直在制作网站,我们就一直在讨论这些问题。

浏览器支持情况


grid基本属性

网格容器grid container

它是所有网格项的直接父级。在下面例子中container是网格容器。

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>复制代码

网格项目grid item

网格容器的子节点,即为直接后代。下面例子中item元素是网格项,但sub-item不是。

<div class="container">
  <div class="item"></div> 
  <div class="item">
      <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>复制代码

网格线grid line

构成网格结构的分界线。它们可以是垂直(‘列网格线’)或水平(‘行网络线’),位于和行和列的任一侧

网络轨道grid track

可以理解为行和列所布局的方向,默认从左到右,从上到下

网格单元grid cell

相邻行和相邻列网格线之间到空间。即为单个网格到‘单元’

网格区域grid area

多个网格线包围的总空间。网格区域可以包含任意数量的网格单元。

网格属性目录

父级的属性

  • grid - 生成块级网格
  • inline-grid - 生成内联级网格

.container {
    display: grid | inline-grid;
}复制代码

grid-template-columns | grid-template-rows

使用以空格分隔的值列表定义网格的列和行。值表示轨道的大小,之间的空间表示网格线。例如(下图为效果图,线条实际不存在):

.container {
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}复制代码


如果您的定义包含重复部分,则可以使用该repeat()表示法来简化事物:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}复制代码

相当于

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}复制代码

网格模板区(grid-area)

  • grid-area-name - 使用指定的网格区域的名称grid-area
  • 。- 句点表示网格单元格
  • none - 没有定义网格区域

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}复制代码


.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}复制代码

以上css将创建一个四列宽三行高的网格。整个顶行将由标题区域组成。中间行将包括两个主要区域,一个空单元格和一个侧边栏区域。最后一行是所有页脚。表现效果大概如下图:


网格间隙(行间隙grid-column-gap,列间隙grid-row-gap)

简写方式为
.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}复制代码

例如:
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}复制代码


单元格对齐方式align-items(垂直对齐方式); justify-items(水平对齐方式)

  • start
    - 将要与其单元格的起始边缘齐平的项目对齐
  • end
    - 将项目与其单元格的结束边缘齐平
  • center
    - 对齐其单元格中心的项目
  • stretch
    - 填充单元格的整个宽度(这是默认值)

.container {
  justify-items: start | end | center | stretch;
}复制代码

.container {
  align-items: start | end | center | stretch;
}复制代码


本文原文档地址css-tricks.com/snippets/cs…

根据以上文档基本可以自定义一个布局组件。如本人用polymer定义了一个组件grid-layout。

github地址为github.com/wanbo-chain…



关注下面的标签,发现更多相似文章
评论