html - different grid area while using grid-template-column - Stack Overflow

admin管理员组

文章数量:1126077

I'm trying to display 4 images in a seemingly irregular grid, I have added two transparent boxes with slightly smaller height than the images, one at the start of the first column and one at the end of the second column.

I will attach images of what I'm trying to achieve vs what I have done along with the code.

.image-grid {
    grid-area: I;
    display: grid;
    grid-template-columns: repeat(2, 0.5fr);
    grid-template-rows: auto auto auto;
    gap: 1rem;
    justify-self: start;
}
  
.image-grid img {
    width: 176px;
    height: 176px;
    border-radius: 8px;
}

.transparent-box {
    width: 176px;
    height: 140px;
    background-color: rgba(0, 0, 0, 0.00);
    border-radius: 8px;
}

<div class="image-grid">
  <div class="transparent-box"></div>
  <img src="images/1.jpg" alt="Digital Network">
  <img src="images/2.jpg" alt="Workstation">
  <img src="images/3.jpg" alt="Person in Digital Environment">
  <img src="images/4.jpg" alt="Circuit Pattern">
  <div class="transparent-box"></div>
</div>

I'm trying to display 4 images in a seemingly irregular grid, I have added two transparent boxes with slightly smaller height than the images, one at the start of the first column and one at the end of the second column.

I will attach images of what I'm trying to achieve vs what I have done along with the code.

.image-grid {
    grid-area: I;
    display: grid;
    grid-template-columns: repeat(2, 0.5fr);
    grid-template-rows: auto auto auto;
    gap: 1rem;
    justify-self: start;
}
  
.image-grid img {
    width: 176px;
    height: 176px;
    border-radius: 8px;
}

.transparent-box {
    width: 176px;
    height: 140px;
    background-color: rgba(0, 0, 0, 0.00);
    border-radius: 8px;
}

<div class="image-grid">
  <div class="transparent-box"></div>
  <img src="images/1.jpg" alt="Digital Network">
  <img src="images/2.jpg" alt="Workstation">
  <img src="images/3.jpg" alt="Person in Digital Environment">
  <img src="images/4.jpg" alt="Circuit Pattern">
  <div class="transparent-box"></div>
</div>

• html
• css
• css-grid

Share Improve this question Follow asked 2 days ago Mohamed MouradMohamed Mourad 2911 silver badge66 bronze badges 2

• 1 The first and last fields are unnecessary, otherwise I don't see you asking a question. – mr mcwolf Commented 2 days ago
• Your first image is not a grid. – Paulie_D Commented 2 days ago

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

Use a grid with a single row. Each grid cell then contains a vertical flexbox, with top padding set differently for each column to achieve that random look.

.image-grid > :first-child {
  margin-top: 10em;
}

.image-grid > :last-child {
  margin-top: 3em;
}

body {
  margin: 1em;
  background: black;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  background: aliceblue;
}

.image-grid > * {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.image-grid > :first-child {
  margin-top: 10em;
  margin-bottom: 3em;
  justify-self: end;
}

.image-grid > :last-child {
  margin-top: 3em;
}

.image-grid img {
    width: 176px;
    height: 176px;
    border-radius: 8px;
}

<div class="image-grid">
  <div class="column">
    <img src="https://picsum.photos/id/602/300">
    <img src="https://picsum.photos/id/603/300">
  </div>
  <div class="column">
    <img src="https://picsum.photos/id/604/300">
    <img src="https://picsum.photos/id/605/300">
  </div>
</div>

You can use a 2 column grid as you are doing but with these alterations:

remove the redundant transparent elements, instead position the first image in column 2;

even numbered images will automatically go into column 1; move them up by the size of the gap (1rem in this case) using a transform as that does not affect the layout of the grid, being only a visual change.

.image-grid {
  grid-area: I;
  display: grid;
  grid-template-columns: repeat(2, 0.5fr);
  grid-template-rows: auto auto auto;
  gap: 1rem;
  justify-self: start;
}

.image-grid img {
  width: 176px;
  height: 176px;
  border-radius: 8px;
  border: solid 1px black;
}

.image-grid :first-child {
  grid-column: 2;
}

.image-grid :nth-child(even) {
  transform: translateY(-1rem);
}

<div class="image-grid">
  <img src="images/1.jpg" alt="Digital Network">
  <img src="images/2.jpg" alt="Workstation">
  <img src="images/3.jpg" alt="Person in Digital Environment">
  <img src="images/4.jpg" alt="Circuit Pattern">
</div>

Is that what you are trying to achieve?

.image-grid {
    grid-area: I;
    display: grid;
    grid-template-columns: repeat(2, 0.5fr);
    grid-template-rows: auto auto auto;
    gap: 1rem;
    justify-self: start;

    & :first-child {
        grid-column-start: 2;
    }

    & :nth-child(even) {
        margin-top: -2rem; 
        background-color: bisque;
    }
}

.image-grid img {
    width: 176px;
    height: 176px;
    border-radius: 8px;
    background-color: aqua;
}

<div class="image-grid">
    <img src="images/1.jpg" alt="Digital Network 1">
    <img src="images/2.jpg" alt="Workstation 2">
    <img src="images/3.jpg" alt="Person in Digital Environment 3">
    <img src="images/4.jpg" alt="Circuit Pattern 4">
</div>

本文标签：