A Simple Guide to Grid

曾小乱 | 2019年4月1日 | 2,398 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…

Next, it is still a demo…

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

Ummm, a demo…


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.


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



Thanks with Q&A