本文介绍了如何工作的css网格-自动排版?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我面对的问题是,我不了解隐式网格是如何工作的。我阅读了文档、MDN和其他一些资源。但还有一个问题尚未解决。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.grid {
display: grid;
grid-template: repeat(2, 100px) / repeat(6, 1fr);
grid-gap: 1rem;
font-size: 2rem;
}
.grid__item {
background-color: #BDBDBD;
}
.grid__item--1 {
grid-row: 1 / -1;
}
.grid__item--5 {
grid-row: 1 / -1;
}
<div class="grid">
<div class="grid__item grid__item--1">1</div>
<div class="grid__item grid__item--2">2</div>
<div class="grid__item grid__item--3">3</div>
<div class="grid__item grid__item--4">4</div>
<div class="grid__item grid__item--5">5</div>
<div class="grid__item grid__item--6">6</div>
</div>