随着CSS网格布局模块很快在Firefox和Chrome中出货,我想我会试着掌握如何使用它.
我试图创建一个简单的网格,一个项目a跨越所有行的左侧,与其他项目(b,c,d,e,等)横跨各行的右侧.跨越行的右侧项目的量是可变的,所以有可能是任意组合b,c,d,e,等等,所以我使用的grid-auto-rows财产.因此,我无法定义a跨越的固定行数,但我想a跨越所有可用行.
#container {
display: grid;
grid-auto-flow: column;
grid-auto-rows: auto;
grid-template-columns: [left] 4rem [right] 1fr;
margin: 0rem auto;
max-width: 32rem;
}
#a {
background: lightgreen;
grid-column: left;
grid-row: 1 / auto;
justify-self: center;
}
#b {
grid-area: auto / right;
background: yellow;
}
#c {
grid-area: auto / right;
background: pink;
}
#d { …