我正在创建一个包含多行和 3 列网格的页面,但在平板电脑中,更改为 2 列网格和移动 1 列网格。
在平板电脑中,当创建 2 列网格时,它会在末尾创建一个空列。
是否可以连接两行,让第二行占据第一行的空位?
或者唯一的机会是将列组织在一行中?
<div class="block-container grid-3-cols_wrapper">
<!-- Row 1 -->
<div class="has-3-columns">
<!-- Col 1 -->
<div class="block-column">
<div><img src="..." alt=""></div>
</div>
<!-- Col 2 -->
<div class="block-column">
<div><img src="..." alt=""></div>
</div>
<!-- Col 3 -->
<div class="block-column">
<div><img src="..." alt=""></div>
</div>
<!-- Row 2 -->
<div class="has-3-columns">
<!-- Col 1 -->
<div class="block-column">
<div><img src="..." alt=""></div>
</div>
<!-- Col 2 -->
<div class="block-column">
<div><img src="..." alt=""></div>
</div>
<!-- Col 3 -->
<div class="block-column">
<div><img src="..." alt=""></div>
</div>
</div>
最佳答案
这应该能让您朝着正确的方向前进。
我已经完成了 CSS
,所以它可以移动。所以第一个媒体查询是针对平板电脑的,第二个是针对台式机的,width: 100%
是针对移动设备的,所以显然会显示一列。您可以修改它以满足您的需要。试一试,有任何问题都可以评论,我会看看:)
FlexBox 方法
flex-direction The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). Have a look at examples here
flex-flow The flex-flow CSS property is a shorthand property for flex-direction and flex-wrap properties. Have a read here
justify-contentThe CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. Have a read here
.grid-container {
display: flex;
flex-direction: row;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
}
.grid-item {
display: flex;
background-color: orange;
width: calc(100% - 10px);
margin: 5px
}
@media (min-width: 720px) {
.grid-item {
width: calc(33.333% - 10px);
}
}
@media (min-width: 1020px) {
.grid-item {
width: calc(25% - 10px);
}
}
<div class='grid-container'>
<div class='grid-item'>item 1</div>
<div class='grid-item'>item 2</div>
<div class='grid-item'>item 3</div>
<div class='grid-item'>item 4</div>
<div class='grid-item'>item 5</div>
<div class='grid-item'>item 6</div>
</div>
请记住,如果您将边距值更改为 20px
,那么您还必须更改 width
值,因为它正在这样做:
width: calc(grid-item-desired-width% - margin);
我真的建议您阅读上面的链接,因为它们都有交互式演示,可以为您提供这些 flexbox 属性如何工作的直观示例。我还建议您尝试使用 flex-box 并尝试不同的值以查看它们如何作用于您的网格。这是学习它并将其牢记在心的最佳方式。希望以上内容对您有所帮助。
CSS 网格方法
另一种方法是使用 CSS Grid
。不确定你想要什么方式,但我个人会选择 flexbox。如果您需要,下面是 CSS 网格方法
.grid-container {
display: grid;
grid-template-columns: auto;
padding: 10px;
grid-gap: 10px 10px;
}
.grid-item {
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}
@media (min-width: 720px) {
.grid-container {
grid-template-columns: auto auto auto;
}
}
@media (min-width: 1020px) {
.grid-container {
grid-template-columns: auto auto auto auto;
}
}
<div class='grid-container'>
<div class='grid-item'>item 1</div>
<div class='grid-item'>item 2</div>
<div class='grid-item'>item 3</div>
<div class='grid-item'>item 4</div>
<div class='grid-item'>item 5</div>
<div class='grid-item'>item 6</div>
</div>
关于CSS Grid - 响应式 - 多个 3 列行到 2 列行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54044769/