曾小乱

A Simple Guide to Grid

曾小乱 | 2019年4月1日 | 58 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

grid、container、cell、area、track、line

There are lots of Properties

Properties for the Grid ContainerProperties for the Grid Items
displaygrid-column-start
grid-template-columnsgrid-column-end
grid-template-rowsgrid-row-start
grid-template-areasgrid-row-end
grid-templategrid-column
grid-column-gapgrid-row
grid-row-gapgrid-area
grid-gapjustify-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…

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

曾小乱微信公众号
曾小乱的微信公众号

Thanks with Q&A