[CSS Grid] Hogwarts ticket

CSS-Tricks推送文章里看到的用CSS Grid实现的霍格沃茨黄牛票

CSS Grid网格布局,使用水平和垂直的线相交形成网格,然后将元素放置在他们形成的单元格上。
使用网格布局,需要在容器元素上定义display: griddisplay: inline-grid,使用grid-template-columnsgrid-template-rows指定网格列和行,定义网格轨道。

.ticket {
    display: grid;
    grid-template-columns: auto 143px;
    // ...
}
.ticket__main {
    display: grid;
    grid-template-columns: repeat(6, 1fr) 120px;
    grid-template-rows: repeat(4, min-content) auto;
    padding: 10px;
}

单位fr可以代表被平分为若干份的网格容器空间中的1份,例如 grid-template-columns: 1fr 1fr 1fr;定义了三个等宽列,也可以写为repeat(3, 1fr);
min-content表示不让内容超出单元格的最小高度(宽度),相应的还有max-content,容纳单元格内容的理想宽度(高度),以及minmax(min, max)函数,即单元格宽度(高度)在min和max值的范围内做相应的变化;

minmax可以参考 minmax()函数如何工作

ticket__main容器中定义了7列,6个重复的1fr轨道和1个固定120像素的列。横向定义了5行,前面4个重复的min-conent,auto相当于minmax(min-content, max-content)

.header {
    grid-area: title;
    grid-column: span 7;
    grid-row: 1;
    padding: 5px 0 5px 20px;
    letter-spacing: 6px;
    // ...
}

grid-column是grid-column-startgrid-column-end的缩写,同grid-row是grid-row-startgrid-row-end的缩写,值可以是开始的网格线 / 结束的网格线,或者span 跨越的轨道数,缺省值为auto。
grid-area可以给网格项命名,之后可以用grid-template-areas属性引用它。另外也可以作为 <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>的缩写。

.ticket__side .info {
    grid-column-start: 2;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

右侧的是修改文本为垂直方向,从右向左书写,然后旋转180度(180度不影响红框样式)

CSS Grid相关文章推荐:
CSS Grid 系列(上)-Grid布局完整指南 - 个人文章 - SegmentFault 思否

Comments
Write a Comment