A Simple Guide to Grid

曾小乱 | 2019年4月1日 | 1,880 views

The beginning of this topic

中国第五届 css 大会 - 深圳 - 2019.03.30 — 中国第五届 css 大会 – 深圳 – 2019.03.30

Why do I want to give a presentation？

很大程度上在于，如果我不分享我就没有深入全面学习研究的动力；其次才是影响力、分享精神与价值方面的东西。
智慧本身就是好的。有一天我们都会死去，追求智慧的道路还会有人在走着。死掉以后的事我看不到，但在我活着的时候，想到这件事，心里就很高兴。- 王小波

display: grid;

我们说说栅格布局。

Something we should know

There are lots of Properties

Properties for the Grid Container	Properties for the Grid Items
display	grid-column-start
grid-template-columns	grid-column-end
grid-template-rows	grid-row-start
grid-template-areas	grid-row-end
grid-template	grid-column
grid-column-gap	grid-row
grid-row-gap	grid-area
grid-gap	justify-self
……	……

First of all, I wanna given a demo…

See the Pen <a href="https://codepen.io/zengxiaoluan/pen/JVGEpQ/">a simple guide to grid</a> by zeng (<a href="https://codepen.io/zengxiaoluan">@zengxiaoluan</a>) on <a href="https://codepen.io">CodePen</a>.

Next, it is still a demo…

See the Pen <a href="https://codepen.io/zengxiaoluan/pen/oOgNPe/">Grid like Win8</a> by zeng (<a href="https://codepen.io/zengxiaoluan">@zengxiaoluan</a>) on <a href="https://codepen.io">CodePen</a>.

More at https://codepen.io/akmaz/pen/GLRXXK

Holy Grail Layout

Ummm, a demo…

See the Pen <a href="https://codepen.io/zengxiaoluan/pen/jRBEeV/">Holy Grail</a> by zeng (<a href="https://codepen.io/zengxiaoluan">@zengxiaoluan</a>) on <a href="https://codepen.io">CodePen</a>.

Functions

repeat – It represents a repeated fragment of the track list.

minmax – It defines a size range greater than or equal to min and less than or equal to max.

fit-content – It clamps a given size to an available size.

Units

fr – It represents a fraction of the available space in the grid container.

gr