Warm tip: This article is reproduced from serverfault.com, please click
How to create a CSS GRID with 3 distinct head elements
发布于 2020-12-04 09:40:51
I get a list using the CSS display: grid as shown below
My task has to be edited so that the list will look like this when it is displayed on PC, while on my mobile it will look like the first image. The first 3 elements will be larger than the rest. And responsive support
Here is my code:
HTML:
.grid {
width: 638px;
display: grid;
grid-row-gap: 68px;
grid-column-gap: 12px;
grid-template-rows: auto auto;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
justify-content: space-between;
}
.item {
border: 3px solid green;
width: auto;
height: 150px;
}<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>I tried to fix it but it doesn't work like, thanks everyone!
Questioner
Tran Thai Hoang
Viewed
0
Thank you! it work well, but I have a question: How do I get the first 3 elements grid-column-gap: 20px; ? thanks
oups, add a margin , i'll update the snippet
@HoangTran updated the snippet to increase the visual gap of the first row.