(译)我学到的关于CSS 网格布局的一些事情

以下是Oliver Williams的客座帖子。 Oliver一直在使用CSS网格布局,并收获良多。 在这篇文章中,他将讨论他在这段旅程中领悟到的不同的概念。 我喜欢这样的想法,通过短小的例子尽可能地学习关于网格布局中的形形色色的。 这使得学习整个过程不会那么吓人。
CSS网格大约到2017年早期会被设置在浏览器中。在那之前,如果你想使用,你需要启用网格工作(除了在Firefox Nightly默认情况下启用)。 Chrome Canary目前具有最佳表现。 同时,Firefox有一个非常宝贵的附加组件叫CSS网格检查器,它可以显示网格的线。 它是目前唯一有这样一个工具的浏览器。
在Chrome中,在地址栏中输入“chrome://flags”,找到“启用实验性网络平台功能(#enable-experimental-web-platform-features)”,然后点击启用。 IE和Edge具有与当前规范不同的旧的实现方法,因此不推荐在此时间点对网格进行实验。

你不能有俄罗斯方块形的网格区域

你会很快地做自己工作。



您的网格区域只能是矩形(如左),而不是任意多边形(如右边)。

网格设计被用于flexbox,而不是去替代flexbox

网格布局 grid和弹性布局 flexbox都可以以类似的方式去实现功能。 你可能已经看到人们使用flexbox来构建网格系统,但这不是flexbox的设计目的。 这是值得阅读Jake Archibald的博客文章Don't use flexbox for overall page layout
一个快速的想法是:
Flexbox用于一维布局(行或列)。
Grid是二维布局。
或者如Rachel Andrews 所说
Flexbox本质上是用于在单维度中布局项目 ( in a row OR a column)。 网格用于二维中的项目布局 (rows AND columns)。
它们也可以组合。 您可以将网格项转换为flex容器。 您可以将flex项目转换为网格。
让我们举一个有用的例子。 我们想要在一个网格项内垂直居中文本,但我们想要背景(无论是颜色,渐变还是图像)覆盖项目的整个网格区域。 我们可以使用一个值为 centeralign-items属性,但此时背景是不会填充整个项目区域的。 align-items的默认值是stretch , 只要将它设置为任何其他值,它就不再填充该空间。 让我们将它设置为stretch并将我们的网格项转换为flex容器。

.grid {
  align-items: stretch;
}
.griditem {
  display: flex;
  align-items: center;
}

使用负行号非常有用

设想一个具有12列网格的现代CSS栅格框架。 在小屏幕上,而不是减少列数,内容显示的宽度为十二列总和,给人一个全宽列的印象。
你可以用网格做同样的事情:

/* For small screens */
.span4, .span6, .spanAll {
  grid-column-end: span 12;
}

/* For large screens */
@media (min-width: 650px) {
  .span4 {
    grid-column-end: span 4;
  }
  .span6 {
    grid-column-end: span 6;
  }
}

上面这种方法没有问题。 然而使用CSS网格,重新定义列数也是很容易的。 通过使用-1,可以确保你的内容始终可以实现想要的结果。

/* For small screens */
.span4, .span6, .spanAll {
  grid-column-end: -1;
}

对于大屏幕,您可能需要多达12列。 对于移动设备,任何地方之间都可以是1到4列。 我们可以很容易地通过媒体查询来更改grid-template-columns的值。

.grid {
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

有可能一些元素,我们想跨越整个视口的所有屏幕大小,如可能的页眉header,页脚footer或一些主图。
对于小屏幕,我们可以写:

.wide {
  grid-column: 1 / 3; /* start at 1, end at 3 */
}

但是,一旦我们进行了媒体查询,这些元素将只覆盖十二列的前两列。 我们可以在同一个媒体查询中包括新的期望:grid-column-end:13,但是有一个更容易的方法。 只要将结束值设置为 -1,它将涵盖所有列,很多时候已经这么做了。 例如:

.wide, .hero, .header, .footer {
  grid-column: 1 / -1;
}

完整演示:
HTML:

<div class="gridcontainer">
  <div class="griditem1">spans all columns</div>
</div>

CSS:

.gridcontainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
}
.griditem1 {
  grid-column-start: 1;
  grid-column-end: -1; 
/* will always span to the last line; no matter how many columns there are!*/
/* grid-column-end: 5; would work below 600px to make my div span all columns but not once I have added a column with a media query. I could adjust grid-column-end to 6 within the media query but it is far easier to use -1 */ 
  background-color: green;
  height: 200px;
  justify-contents: center;  
  font-family: helvetica, arial;
  text-align: center;
}
@media (min-width: 600px) {
  .gridcontainer {
  grid-template-columns: repeat(12, 1fr); /* I have added extra columns at larger screen sizes!! */
  }
}

未完待续。。。

https://css-tricks.com/things-ive-learned-css-grid-layout/
https://css-tricks.com/snippets/css/complete-guide-grid/

推荐阅读更多精彩内容