gpt4 book ai didi

css - 如何创建一个包含 3 个图像的 CSS 网格(第 1 行 2 个,第 2 行 1 个),其中第三个图像居中

转载 作者:行者123 更新时间:2023-12-05 07:04:08 25 4
gpt4 key购买 nike

<分区>

我正在尝试创建响应式网格。桌面应该是一行,三张图片都居中。在较小的屏幕上 (<720px),我需要两张图片,第三张图片换行到下一行。我已经做到了 - 但它换到左边的下一行 - 我需要它居中。我认为这是因为我实现“换行”的方式是告诉它创建两列(因此它是第 2 行/第 2 列的“预留”空间)。

目前它看起来像这样:

enter image description here

我希望它看起来像这样:

enter image description here

@media (min-width: 900px) {
#grid-container-clients {
padding-top: 30px;
margin: auto;
display: grid;
width: 900px;
height: 200px;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
background-color: white;
text-align: center;
}
.grid-item-clients {
/*grid-rows:*/
position: relative;
text-align: center;
border: solid black 1px;
border-radius: 2px;
}
}

@media (max-width: 899px) {
#grid-container-clients {
padding-top: 30px;
margin: auto;
display: grid;
width: 400px;
height: 400px;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
background-color: white;
text-align: center;
}
.grid-item-clients {
position: relative;
text-align: center;
border: solid black 1px;
border-radius: 2px;
}
}
<div id="grid-container-clients">
<div class="grid-item-clients"><img src="images/client.png" style="width:100%;"></div>
<div class="grid-item-clients"><img src="images/client.png" style="width:100%"></div>
<div class="grid-item-clients"><img src="images/client.png" style="width:100%"></div>
</div>
<!-- End "container-clients" -->

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com