金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 原生CSS网格布局学习笔记,布局的使用

原生CSS网格布局学习笔记,布局的使用

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-29 12:46

原生CSS网格布局学习笔记

2016/12/22 · CSS · 网格布局

原文出处: css-tricks   译文出处:众成翻译   

译者注:此文适合有一定CSS原生网格布局使用经验的开发者(读前需要先去了解一下原生CSS网格的语法),原生CSS网格布局(Native CSS grid)截止目前还没有被任何正式版本的浏览器实现。

以下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权。在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习之路。我比较赞同他的想法,就是学习一门新技术的时候,把它们拆分成比较小的单元块并配上实例,一步一步的学习。这比直接学习网格布局的所有东西要好太多了。

浏览器原生CSS网格预计会在2017年年初得到支持. 在这之前你需要在浏览器中开启这个实验性的功能 (Firefox实验版默认是开启的). Chrome Canary是当前最好的实现. 同时,火狐有一个非常好的插件叫CSS Grid Inspector, 它能显示出网格的线,它是目前唯一可以在浏览器中运行的此类工具。

在 chrome的地址栏中输入chrome://flags, 找到 ‘实验性网络平台功能’ 并开启它. IE 和 Edge 实现的是一个比较老的网格标准,现在并不受支持。

原文地址

grid 布局的使用

Flexbox(弹性盒)用于一维布局 —— 也就是行或者列. 网格用于二维布局 —— 也就是多行多列.
https://www.w3cplus.com/css3/a-visual-guide-to-css3-flexbox-properties.html
https://www.w3cplus.com/css3/things-ive-learned-css-grid-layout.html
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
其默认值为:row

网格布局不是将零散的块拼到一起

相信我,很快你就能掌握它的.

金沙棋牌官方平台 1

网格布局只能像左边那样,以矩形的单元块组合起来。并不能像右图那样,由一堆零散的多边形(跟俄罗斯方块那样的块)拼凑。

注:此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者(读前需要先去了解一下原生CSS网格的语法),原生CSS网格布局(Native CSS grid)截止目前还没有被任何正式版本的浏览器实现。

   css 网格布局,是一种二维布局系统。

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
默认值:nowrap

设计网格布局并不是为了取代弹性盒,相反,它是弹性盒的一种补充

虽然网格布局和弹性盒在某些方面起到相似的作用,而且你可以发现,很多人用弹性盒来实现网格布局,但这并不是设计弹性盒的初衷。Jake Archibald的这篇博文值得一读_Don’t use flexbox for overall page layout。

这篇博文大概的意思是:

  • Flexbox(弹性盒)是为一维布局设计的(行或列)。
  • CSS网格是为二维设计的.

Rachel Andrews也 说过类似的话:

Flexbox(弹性盒)用于一维布局 – 也就是行或者列. 网格用于二维布局 – 也就是多行多列.

它们可以很好的结合,你可以往弹性容器中放入网格,也可以在网格块中加入flex元素

来看个例子吧。 我们想在一个网格元素(grid item)里垂直居中一段文字, 但我们想要让背景(图片,颜色或渐变)覆盖整个的网格区域。 我们可以使用align-items属性,并把它的值设为center,但是如果这样背景并不会填满整个网格元素的区域。align-items 默认的值是 stretch-你不改变它,始终会填满整个空间的。我们把网格元素设为align-items:center并把网格元素(grid item)设置为一个弹性容器(flex container)。

CSS

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

1
2
3
4
5
6
7
8
.grid {
  align-items: stretch;
}
 
.griditem {
  display: flex;
  align-items: center;
}

_以下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权。在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习之路。我比较赞同他的想法,就是学习一门新技术的时候,把它们拆分成比较小的单元块并配上实例,一步一步的学习。这比直接学习网格布局的所有东西要好太多了。

   浏览器支持情况:老旧浏览器不支持,

flex-flow: <flex-direction> || <flex-wrap>;

给grid-column-end设置负值,意想不到的有用

在小屏幕下,写一个12列的网格,所有格子的跨度都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; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 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网格,重新定义列数非常简单。并且你可以通过设置grid-column-end: -1;来让你的页面始终是从左到右贯穿的。

CSS

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

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

在大屏幕上,你想要尽可能的接近12列,但是在移动端,一行大概是1~4列。用media来改变grid-template-columns是非常容易的。

CSS

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

1
2
3
4
5
6
7
8
9
.grid {
  grid-template-columns: 1fr 1fr;
}
 
@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

有一些元素,我们想让它贯穿整个视口,比如像 header, footer,和一些大图啥的。

对于小屏幕,我们可以这样写:

CSS

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

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

不幸的是,当我们换到大屏的时候,一行12列,这些元素将仅仅占满前两列,并不会占满12列,我们需要定义新的grid-column-end,并且把他的值设为 13. 这种方式比较麻烦,还有一种简单的方式,grid-column: 1 / -1;,这样不论在什么屏幕尺寸下,它们都是占满整行的了。就像下面这样:

CSS

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

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

See the Pen Easier media queries with -1 by CSS GRID (@cssgrid) on CodePen.

浏览器原生CSS网格预计会在2017年年初得到支持. 在这之前你需要在浏览器中开启这个实验性的功能 (Firefox实验版默认是开启的). Chrome Canary是当前最好的实现. 同时,火狐有一个非常好的插件叫CSS Grid Inspector, 它能显示出网格的线,它是目前唯一可以在浏览器中运行的此类工具。

   概念: 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
默认值:flex-start

网格区域可以命名,并使用一些隐含的名字

使用grid-template-areasgrid-line-numbers是两种控制行数的属性,你也可以两个同时用。你可以使用那些隐含的行名去设置你的网格。

CSS

.grid { grid-template-areas: "main main sidebar sidebar"; }

1
2
3
.grid {
  grid-template-areas: "main main sidebar sidebar";
}

这段代码,我们能得到四个隐含名字,main-start, main-end, sidebar-start, 和 sidebar-end.

这可能很有用,如果你想重叠内容,无论是在几个网格区域或在一个特定分段的网格区域。

See the Pen implicit line names with grid areas by CSS GRID (@cssgrid) on CodePen.

在 chrome的地址栏中输入chrome://flags, 找到 ‘实验性网络平台功能’ 并开启它. IE 和 Edge 实现的是一个比较老的网格标准,现在并不受支持。

      <div class="container">

align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
默认值:stretch

定义网格区域的另一种方式

就像给网格的行命名,特殊的行名能用于设置网格区域,语法是这样的:

CSS

.grid { grid-template-areas: "header header header" "main main sidebar" "footer footer footer"; } 、

1
2
3
4
5
6
.grid {
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
} 、

如果你的布局设计(太多列的布局!没列都要起名字,可能还需要空元素)中有很多空的区域,这种写法稍微有点麻烦。所以对于网格是有另一种写法的,在这种写法中,名字是什么无所谓,只要你合理利用到[name-start][name-end],也能达到自己的布局目的。下面是一个例子:

CSS

.grid { display: grid; grid-template-columns: 20px 100px [main-start] 1fr [main-end] 100px 20px; grid-template-rows: 100px [main-start] 100px [main-end] 100px; } .griditem1 { background-color: red; grid-area: main; }

1
2
3
4
5
6
7
8
9
10
.grid {
  display: grid;
  grid-template-columns: 20px 100px [main-start] 1fr [main-end] 100px 20px;
  grid-template-rows: 100px [main-start] 100px [main-end] 100px;
}
 
.griditem1 {
  background-color: red;
  grid-area: main;
}

See the Pen Another way of defining grid-areas by CSS GRID (@cssgrid) on CodePen.

你可能并不想整个页面都用这种方式布局,但是如果你想要结合 grid-area来确定行数的话,它会非常适合。

金沙棋牌官方平台 ,网格布局不是将零散的块拼到一起

相信我,很快你就能掌握它的.

金沙棋牌官方平台 2

网格布局只能像左边那样,以矩形的单元块组合起来。并不能像右图那样,由一堆零散的多边形(跟俄罗斯方块那样的块)拼凑。

         <div class="item item-1"></div>

align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
默认值:stretch

相等尺寸网格(equal sized box layout)使用vmin单位

虽然你可以在CSS网格中使用任意尺寸的行或列,但是如果想要相等大小的格子并是响应式的,你就需要使用vmin单位了。

CSS

.grid { grid-template-columns: repeat(5, 20vw); grid-template-rows: repeat(5, 20vh); }

1
2
3
4
.grid {
  grid-template-columns: repeat(5, 20vw);
  grid-template-rows: repeat(5, 20vh);
}

这种布局在台式电脑和笔记本上基本都可以完美显示,但是在手机上,高度大于宽,内容将会溢出,产生出一个横向的滚动条。Dudley Storey写了篇blog说这件事the usefulness of a lesser-known css unit: vmin。这种方法,通过调整容器视口的百分比和内容位置,做到适配各种尺寸的屏幕。

CSS

.gridcontainer { display: grid; width: 100vw; height: 100vh; justify-content: center; align-content: center; grid-template-columns: repeat(5, 20vmin); grid-template-rows: repeat(5, 20vmin); }

1
2
3
4
5
6
7
8
9
.gridcontainer {
  display: grid;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(5, 20vmin);
  grid-template-rows: repeat(5, 20vmin);
}

See the Pen Boxy Layout with CSS Grid and vmin by CSS GRID (@cssgrid) on CodePen.

设计网格布局并不是为了取代弹性盒,相反,它是弹性盒的一种补充

虽然网格布局和弹性盒在某些方面起到相似的作用,而且你可以发现,很多人用弹性盒来实现网格布局,但这并不是设计弹性盒的初衷。Jake Archibald的这篇博文值得一读_Don't use flexbox for overall page layout。

这篇博文大概的意思是:

  • Flexbox(弹性盒)是为一维布局设计的(行或列)。

  • CSS网格是为二维设计的.

Rachel Andrews也 说过类似的话:

Flexbox(弹性盒)用于一维布局 – 也就是行或者列. 网格用于二维布局 – 也就是多行多列.

它们可以很好的结合,你可以往弹性容器中放入网格,也可以在网格块中加入flex元素

来看个例子吧。 我们想在一个网格元素(grid item)里垂直居中一段文字, 但我们想要让背景(图片,颜色或渐变)覆盖整个的网格区域。 我们可以使用align-items属性,并把它的值设为center,但是如果这样背景并不会填满整个网格元素的区域。align-items 默认的值是 stretch-你不改变它,始终会填满整个空间的。我们把网格元素设为align-items:center并把网格元素(grid item)设置为一个弹性容器(flex container)。

.grid {
  align-items: stretch;
}

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

        <div class="item item-2"></div>

item

order: <integer>;
默认值: 0

flex-grow: <number>;
默认值: 0

flex-shrink: <number>;

flex-basis: auto | <width>;

flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
auto(1 1 auto)和non(0 0 auto)。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

绝对定位

当我们绝对定位一个网格元素的时候,这个元素会跑到它的容器中,我们可以用grid-column 和 grid-row来定位它。正常情况下,绝对定位使元素脱离文档流,它最适合的使用场景就是想要让元素重叠,并不打乱其他布局元素。除非你为每个元素声明grid-column-startgrid-row-start,要不然即使使用了绝对定位,元素也是不会重叠的。

尝试删除这个例子中div的position: absolute;,思考grid-column 和 grid-row的值,也可以试试修改它们,你就明白是什么意思了。

See the Pen preserving auto-placement with position: absolute by CSS GRID (@cssgrid) on CodePen.

给grid-column-end设置负值,意想不到的有用

在小屏幕下,写一个12列的网格,所有格子的跨度都12列。

你可以用网格这样做:

/* 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网格,重新定义列数非常简单。并且你可以通过设置grid-column-end: -1;来让你的页面始终是从左到右贯穿的。

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

在大屏幕上,你想要尽可能的接近12列,但是在移动端,一行大概是1~4列。用media来改变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 */
}

不幸的是,当我们换到大屏的时候,一行12列,这些元素将仅仅占满前两列,并不会占满12列,我们需要定义新的grid-column-end,并且把他的值设为 13. 这种方式比较麻烦,还有一种简单的方式,grid-column: 1 / -1;,这样不论在什么屏幕尺寸下,它们都是占满整行的了。就像下面这样:

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

See the Pen Easier media queries with -1 by CSS GRID (@cssgrid) on CodePen.

        <div class="item item-3"></div>

grid

https://www.w3cplus.com/css/learncssgrid.html
display: grid
display: inline-grid

grid-template-rows: 50px 100px
grid-template-columns: 90px 50px 120px

grid-template-columns: 1fr 1fr 2fr

grid-template-columns: 3rem 25% 1fr 2fr

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 30px repeat(3, 1fr) 30px

grid-row-gap: 20px;
grid-column-gap: 5rem;
grid-gap: <grid-row-gap> <grid-column-gap> ;

grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;

grid-row: 2;
grid-column: 3 / 4;

grid-area: 2 / 2 / 3 / 3;
grid-area: <grid-row-start>/<grid-column-start>/<grid-row-end>/<grid-column-end>

grid-row: 2 / span 3; grid-column: span 2
span后面紧随数字,表示合并多少个列或行

改变网格元素(grid item)的顺序

如果你使用过弹性盒(flexbox)的order 属性,那你已经知道一些相关的知识了。所有的网格元素都有一个默认的order值0。所以如果给一个网格元素设置 order: 1;,这个元素将在所有元素的后面。 你可以给order属性设置负值,让它跑到所有item的前面。

See the Pen Order value by CSS GRID (@cssgrid) on CodePen.

网格区域可以命名,并使用一些隐含的名字

使用grid-template-areasgrid-line-numbers是两种控制行数的属性,你也可以两个同时用。你可以使用那些隐含的行名去设置你的网格。

.grid {
  grid-template-areas: "main main sidebar sidebar";
}

这段代码,我们能得到四个隐含名字,main-start, main-end, sidebar-start, 和 sidebar-end.

这可能很有用,如果你想重叠内容,无论是在几个网格区域或在一个特定分段的网格区域。

See the Pen implicit line names with grid areas by CSS GRID (@cssgrid) on CodePen.

       </div>

网格线命名

grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;

grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

grid-auto-row: row
grid-auto-flow: column

grid中 minmax()的坑

想不想要整行随着内容的宽度而变宽,直到他们达到最大宽度,这种情况你可能想尝试使用 minmax()

CSS

.grid { display: grid; grid-template-columns: repeat(3, minmax(1fr, 300px)); }

1
2
3
4
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(1fr, 300px));
}

不幸的是,像上面这样看似简单,实际上是不行的。如果max小于min的话,css会被忽略。在minmax()fr不能使用。实际上实现这个需求很容易,在grid-template-columnsgrid-template-rows中使用auto,这样item就可以随着内容增大而变大了。 See the Pen The value of auto vs fr by CSS GRID (@cssgrid) on CodePen.

我们可以设置一个 max-width:

CSS

.grid { display: grid; grid-template-columns: repeat(3, auto); } .item { max-width: 300px; }

1
2
3
4
5
6
7
8
.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
}
 
.item {
  max-width: 300px;
}

See the Pen The limits of minmax by CSS GRID (@cssgrid) on CodePen.

minmax()的运行方式和使用我还没有完全想出来,虽然如此,我还是写了一篇文章(译者注:Medium entitled是什么我没有理解清楚,原文:I wrote an entire post on Medium entitled) The One Thing I Hate About Grid.

定义网格区域的另一种方式

就像给网格的行命名,特殊的行名能用于设置网格区域,语法是这样的:

.grid {
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
} 、

如果你的布局设计(太多列的布局!没列都要起名字,可能还需要空元素)中有很多空的区域,这种写法稍微有点麻烦。所以对于网格是有另一种写法的,在这种写法中,名字是什么无所谓,只要你合理利用到[name-start][name-end],也能达到自己的布局目的。下面是一个例子:

.grid {
  display: grid;
  grid-template-columns: 20px 100px [main-start] 1fr [main-end] 100px 20px;
  grid-template-rows: 100px [main-start] 100px [main-end] 100px;
}

.griditem1 {
  background-color: red;
  grid-area: main;
}

See the Pen Another way of defining grid-areas by CSS GRID (@cssgrid) on CodePen.

你可能并不想整个页面都用这种方式布局,但是如果你想要结合 grid-area来确定行数的话,它会非常适合。

    网格项。网格容器的子元素。

网格项目对齐方式(Box Alignment)

justify-items: start
justify-items: end
justify-items: center
justify-items: stretch

align-items: start
align-items: end
align-items: center
align-items: stretch

justify-self: start
justify-self: end
justify-self: center

align-self: start
align-self: end
align-self: center

justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-around
justify-content:space-between
justify-content: space-evenly;

align-content: start;
align-content: end;
align-content: center;
align-content: space-around
align-content:space-between
align-content: space-evenly;

grid-column-end: -1;
让你的页面始终是从左到右贯穿的

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

如果你给每一个网格线命名了的话,写布局将容易的多

有多种办法供你选择,如果你就想多写点,你可以给多行设置多个名字。

CSS

.grid { grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end]; }

1
2
3
.grid {
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
}

最简单的命名约定使用网格自动编号。不是去写 [col2],而是写为col 2

CSS

.griditem1 { grid-column-start: col 2; }

1
2
3
.griditem1 {
  grid-column-start: col 2;
}

span关键字组合使用,我们就不用去写column-start和column-end中的各种网格线数字了,这样能直观许多。

CSS

.grid { grid-template-columns: repeat(4, [col] 100px); } .griditem1 { grid-column: col 2 / span 2; }

1
2
3
4
5
6
7
.grid {
  grid-template-columns: repeat(4, [col] 100px);
}
 
.griditem1 {
  grid-column: col 2 / span 2;
}

相等尺寸网格(equal sized box layout)使用vmin单位

虽然你可以在CSS网格中使用任意尺寸的行或列,但是如果想要相等大小的格子并是响应式的,你就需要使用vmin单位了。

.grid {
  grid-template-columns: repeat(5, 20vw);
  grid-template-rows: repeat(5, 20vh);
}

这种布局在台式电脑和笔记本上基本都可以完美显示,但是在手机上,高度大于宽,内容将会溢出,产生出一个横向的滚动条。Dudley Storey写了篇blog说这件事the usefulness of a lesser-known css unit: vmin。这种方法,通过调整容器视口的百分比和内容位置,做到适配各种尺寸的屏幕。

.gridcontainer {
  display: grid;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(5, 20vmin);
  grid-template-rows: repeat(5, 20vmin);
}

See the Pen Boxy Layout with CSS Grid and vmin by CSS GRID (@cssgrid) on CodePen.

      <div class="container">

fr单位为什么那个的重要,让你摆脱麻烦的计算

想象一下一行上四等列这种布局,使用百分比是多么的容易grid-template-columns: 25% 25% 25% 25%

但是当想用grid-gap属性的时候那?如果设置grid-gap: 10px,那么这一行上将有三个空隙,每个10px,整体的宽度就是100% + 30px,大于100%滚动条就出来了。虽然可以通过计算来解决,但是如果使用fr,这太容易了grid-template-columns: 1fr 1fr 1fr 1fr

See the Pen fr unit vs percentage by CSS GRID (@cssgrid) on CodePen.

绝对定位

当我们绝对定位一个网格元素的时候,这个元素会跑到它的容器中,我们可以用grid-column 和 grid-row来定位它。正常情况下,绝对定位使元素脱离文档流,它最适合的使用场景就是想要让元素重叠,并不打乱其他布局元素。除非你为每个元素声明grid-column-startgrid-row-start,要不然即使使用了绝对定位,元素也是不会重叠的。

尝试删除这个例子中div的position: absolute;,思考grid-column 和 grid-row的值,也可以试试修改它们,你就明白是什么意思了。

See the Pen preserving auto-placement with position: absolute by CSS GRID (@cssgrid) on CodePen.

        <div class="item "></div>

网格布局中第二个我较恶心的点

没有办法强制自动布局算法留下一些行和列是空的。

grid-gap可以让我们设置内容间的距离。grid-row-gapgrid-column-gap能设置行或列之间的间隙,可是如果我想让第一行和第二行相距10px,第二行和第三行相距50px,用现有的网格是没法实现的,除非建个空行占位。

你可能见到过像下面这样写grid-template-area的::

CSS

grid-template-rows: "header header header" "main main main" " . . ." "secondary secondary secondary" "footer footer footer";

1
2
3
4
5
6
grid-template-rows:
  "header header header"
  "main    main   main"
  "  .       .       ."
  "secondary secondary secondary"
  "footer footer footer";

应该提供一个比较聪明的办法,让布局算法去做这件事。不幸的是,这样写也没用。此语法简单地表示,我们不想将第三行变成一个命名的网格区域。可是grid-template-rows将仍然在那结束。

改变网格元素(grid item)的顺序

如果你使用过弹性盒(flexbox)的order 属性,那你已经知道一些相关的知识了。所有的网格元素都有一个默认的order值0。所以如果给一个网格元素设置 order: 1;,这个元素将在所有元素的后面。
你可以给order属性设置负值,让它跑到所有item的前面。

See the Pen Order value by CSS GRID (@cssgrid) on CodePen.

         <div class="item "></div>

Some design advice: You don’t necessarily need 12 columns (and columns need not be uniform in size)

grid中 minmax()的坑

想不想要整行随着内容的宽度而变宽,直到他们达到最大宽度,这种情况你可能想尝试使用 minmax()

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(1fr, 300px));
}

不幸的是,像上面这样看似简单,实际上是不行的。如果max小于min的话,css会被忽略。在minmax()fr不能使用。实际上实现这个需求很容易,在grid-template-columnsgrid-template-rows中使用auto,这样item就可以随着内容增大而变大了。
See the Pen The value of auto vs fr by CSS GRID (@cssgrid) on CodePen.

我们可以设置一个 max-width:

.grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
}

.item {
  max-width: 300px;
}

See the Pen The limits of minmax by CSS GRID (@cssgrid) on CodePen.

minmax()的运行方式和使用我还没有完全想出来,虽然如此,我还是写了一篇文章(译者注:Medium entitled是什么我没有理解清楚,原文:I wrote an entire post on Medium entitled) The One Thing I Hate About Grid.

        <div class="item"></div>

一些设计上的建议: 你不一点需要12列网格 (每一列不一定大小一致)

12列网格算是web design的默认配置了。Bootstrap引导大家用12列网格,导致很多框架都是12列网格。12既能被3整除也能被4整除,能让我们有更多种布局摆放方式。1行12列,1行6列,1行4列,1行3列,1行2列

虽然有些人喜欢每一个项目总是使用相同的网格,但是你应该去思考你真正需要的,有时候没有必要有更多的列,你应该建立一个网格,对针对你的内容去布局,而不是一个12列网格到处用。

看看这个例子 Gridset. Gridset是一个制作网格非常有用的工具, 但是原生CSS的网格不需要你使用任何工具,但是可以看看它展示的一些良好的网格设计。

金沙棋牌官方平台 3

看看我写的例子,CSS原生网格是多么的自由啊:

See the Pen text layout with CSS Grid module by CSS GRID (@cssgrid) on CodePen.

1 赞 收藏 评论

金沙棋牌官方平台 4

如果你给每一个网格线命名了的话,写布局将容易的多

有多种办法供你选择,如果你就想多写点,你可以给多行设置多个名字。

.grid {
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
}

最简单的命名约定使用网格自动编号。不是去写 [col2],而是写为col 2

.griditem1 {
  grid-column-start: col 2;
}

span关键字组合使用,我们就不用去写column-start和column-end中的各种网格线数字了,这样能直观许多。

.grid {
  grid-template-columns: repeat(4, [col] 100px);
}

.griditem1 {
  grid-column: col 2 / span 2;
}

       </div>

fr单位为什么那个的重要,让你摆脱麻烦的计算

想象一下一行上四等列这种布局,使用百分比是多么的容易grid-template-columns: 25% 25% 25% 25%

但是当想用grid-gap属性的时候那?如果设置grid-gap: 10px,那么这一行上将有三个空隙,每个10px,整体的宽度就是100% + 30px,大于100%滚动条就出来了。虽然可以通过计算来解决,但是如果使用fr,这太容易了grid-template-columns: 1fr 1fr 1fr 1fr

See the Pen fr unit vs percentage by CSS GRID (@cssgrid) on CodePen.

    网格线。组成网格线的分界线,他们可以是列网格线,也可以是行网格线

网格布局中第二个我较恶心的点

没有办法强制自动布局算法留下一些行和列是空的。

grid-gap可以让我们设置内容间的距离。grid-row-gapgrid-column-gap能设置行或列之间的间隙,可是如果我想让第一行和第二行相距10px,第二行和第三行相距50px,用现有的网格是没法实现的,除非建个空行占位。

你可能见到过像下面这样写grid-template-area的::

grid-template-rows:
  "header header header"
  "main    main   main"
  "  .       .       ."
  "secondary secondary secondary"
  "footer footer footer";

应该提供一个比较聪明的办法,让布局算法去做这件事。不幸的是,这样写也没用。此语法简单地表示,我们不想将第三行变成一个命名的网格区域。可是grid-template-rows将仍然在那结束。

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

Some design advice: You don't necessarily need 12 columns (and columns need not be uniform in size)

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

一些设计上的建议: 你不一点需要12列网格 (每一列不一定大小一致)

12列网格算是web design的默认配置了。Bootstrap引导大家用12列网格,导致很多框架都是12列网格。12既能被3整除也能被4整除,能让我们有更多种布局摆放方式。1行12列,1行6列,1行4列,1行3列,1行2列

虽然有些人喜欢每一个项目总是使用相同的网格,但是你应该去思考你真正需要的,有时候没有必要有更多的列,你应该建立一个网格,对针对你的内容去布局,而不是一个12列网格到处用。

看看这个例子 Gridset. Gridset是一个制作网格非常有用的工具, 但是原生CSS的网格不需要你使用任何工具,但是可以看看它展示的一些良好的网格设计。

金沙棋牌官方平台 5

看看我写的例子,CSS原生网格是多么的自由啊:

See the Pen text layout with CSS Grid module by CSS GRID (@cssgrid) on CodePen.

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

  设置在网格容器上的属性

    注:当元素设置了网格布局,column、float、clear、vertical-align属性无效

    1. display: grid | inline-grid | subgrid;

      属性值: grid: 生成块级网络

      inline-grid: 生成行内网格

      subgrid: 如果容器本身是网格项,用来继承父容器的行列大小。

    

    2.grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;

      grid-template-rows: <track-size> ... | <line-name> <track-size>

      设置行和列的大小。

        属性值: track-size: 轨道大小,可以使用css长度,百分比或用分数。

            line-name:网格线名字,可以选择任意名字。

          当设置行或者列大小为auto 时,网格会自动分配空间和网格名称。

        .container{

             display:grid;

             grid-template-columns: 40px 50px auto 50px 40px;

             grid-template-rows: 25% 100px auto;

           }

 

      可以给网格线定义名字.

          .container{

            display:grid; grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start]

              50px [five] 40px [end];

             grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line]

            auto [last-line];

           }

      用fr单位可以将容器分为几等份,例如下面分成三等份

        .container{

             display:grid;

            grid-template-columns: 1fr 1fr 1fr;

        }

    3.grid-template-areas

      通过获取网格项中的grid-area属性值(名称),来定义网格模版。

      重复网格区(grid-area)名称将跨越网格单元格,‘.’代表空网格单元。

        属性值: grid-area-name: 网格项的grid-area属性值(名字)‘.’ : 空网格单元 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" }

    

    4. grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> ;

        网格单元间距

        属性值:line-size: 网格线间距,设置单位值

        .container{

          display:grid;

          grid-template-columns: 100px 50px 100px;

          grid-template-rows: 80px auto 80px;

          grid-column-gap: 10px; grid-row-gap: 15px;

        }

    5. grid-gap:<grid-column-gap> <grid-row-gap>;

      是grid-column-gap 和 grid-row-gap简写。

        .container{

          display:grid;

          grid-template-columns: 100px 50px 100px;

          grid-template-rows: 80px auto 80px;

          grid-gap: 10px 15px;

        }

    6. justify-items: start | end | center | stretch(默认) ;

      垂直于列网格线对齐,适用于网格容器里的所有网格项。

        属性值:

          start: 左对齐。

          end: 右对齐。

          center: 居中对齐。

          stretch: 填满(默认)。

          .container{

             display:grid;

            justify-items: start;

           }

  

    7. align-items: start | end | center | stretch ;

        垂直于行网格线对齐,适用于网格容器里的所有网格项。

        属性值:

          start: 顶部对齐。

          end: 底部对齐。

          center: 居中对齐。

          stretch:填满(默认)。

    8. justify-content: start | end | center | stretch | space-around |

        space-between | space-evenly ;

      如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容

        器,这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。

      属性值: start: 左对齐。 end: 右对齐。 center: 居中对齐。

          stretch: 填满网格容器。 space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。

             space-between: 两边对齐,网格项之间间隔相等。 space-evenly: 网格项间隔相等。

      .container{ display:grid; justify-content: start; }

 

    9. align-content: start | end | center | stretch | space-around |

        space-between | space-evenly ;

      如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格

        容器,这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。

          属性值: start: 顶部对齐。 end: 底部对齐。 center: 居中对齐。

               stretch: 填满网格容器。 space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。

              space-between: 两边对齐,网格项之间间隔相等。 space-evenly: 网格项间隔相等。

      .container{ display:grid; align-content: start; }

  

    10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;

      自动生成隐式网格轨道(列和行),当你定位网格项超出网格容器

      范围时,将自动创建隐式网格轨道.

      属性值:track-size: 网格轨道大小,可以是固定值,百分比或者是

      分数(fr单位)。

      .container{

          display:grid;

          grid-template-columns: 60px 60px;

          grid-template-rows: 90px 90px

       }

    

    11. grid-auto-flow : row(默认) | column | dense ;

      在没有设置网格项的位置时,这个属性控制网格项怎样排列

        属性值:

          row: 按照行依次从左到右排列。

          column: 按照列依次从上倒下排列。

          dense: 按先后顺序排列。

 

设置在网格项上的属性

    1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;    

         grid-column-end: <number> | <name> | span <number> | span <name> | auto ;    

         grid-row-start: <number> | <name> | span <number> | span <name> | auto ;    

         grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

    通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的

      开始位置,grid-column-end、grid-row-end定义网格项的结束位置。

      属性值: line: 指定带编号或者名字的网格线。 span <number>: 跨越轨道的数量。

       span <name>: 跨越轨道直到对应名字的网格线。 auto: 自动展示位置,默认跨度为1。

        .item-a{

             grid-column-start: 2;

            grid-column-end: five;

             grid-row-start: row1-start grid-row-end: 3

        }

    

    2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;      

      grid-row: <start-line> / <end-line> | <start-line> / span <value> ;

        是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。

        .item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; }

    

    3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;

      定义网格项名字,以便创建模块(容器属性grid-template-areas来定义模块)。

        属性值: name: 项目名子。 <row-start> / <column-start> / <row-end> / <column-end>:

      可以是数字或网格线名字。

        例子: 定义网格项名字:

            .item-d{ grid-area: header }

            通过网格线定位网格项:

          .item-d{

              grid-area: 1 / col4-start / last-line / 6 ;

            }

    4. justify-self: justify-self: start | end | center | stretch;

      定义单个网格项垂直于列网格线的对齐方式。

      属性值: start: 网格区域左对齐。 end: 网格区域右对齐。

           center: 网格区域居中。 stretch: 网格区域填满。

      

    5. align-self: start | end | center | stretch;

      定义单个网格项垂直于行网格线的对齐方式。

      属性值:

        start: 网格区域顶部对齐。

        end: 网格区域底部对齐。

        center: 网格区域居中。

        stretch: 网格区域填满。

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:原生CSS网格布局学习笔记,布局的使用

关键词:

上一篇:没有了

下一篇:没有了