Question 219032 in Html Question posted in
Some basic documentation can be found here.

Html – How do I get divs to resize according to grid-row and grid-column in css?

I want to create a grid for a picture gallery, but when I use the grid-row and grid-column properties to set define the area of the elements in the grid container in a way that make them take two squares either vertically or horizontally. It frees up the space but the grid itself remains in one square.
PS : grid-row-start/end and grid-column-start/end give the same result.

HTML code

<div id="gallery_pics">
    <div class="gallery_pic">1</div>
    <div class="gallery_pic">2</div>
    <div class="gallery_pic">3</div>
    <div class="gallery_pic">4</div>
    <div class="gallery_pic">5</div>
    <div class="gallery_pic">6</div>
</div>

CSS code

#gallery_pics{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    grid-template-rows: repeat(4, minmax(300px, 1fr));
    gap: 10px;
}
.gallery_pic{
    width: 100%;
    min-height: 300px;
    border: 1px black solid;
    background-color: rgb(142, 142, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}
.gallery_pic:nth-child(1){
    grid-row: 1/2;
    grid-column: 1/1;
}
.gallery_pic:nth-child(2){
    grid-row: 1/1;
    grid-column: 2/3;
}
.gallery_pic:nth-child(3){
    grid-row: 2/2;
    grid-column: 2/3;
}
.gallery_pic:nth-child(4){
    grid-row: 3/3;
    grid-column: 1/2;
}
.gallery_pic:nth-child(5){
    grid-row: 4/4;
    grid-column: 1/2;
}
.gallery_pic:nth-child(6){
    grid-row: 3/4;
    grid-column: 3/3;
}

The picture with the blue rectangles shows what I want and the one with the red ones show what I get
What I want
What I get with my code

Wow do I obtain the layout with the blue rectangles instead of that with the red rectangles ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution. instead of writing

    grid-row : 1/2;

    I had to write

    grid-row : 1/span 2;

    to specify that it spans from one to two


  2. 0

    Use the inspector in Firefox or Chrome. You can turn on show grid lines, and it will help you to see what is actually happening.

    You were pretty close, but you were one grid line short on all of your spans. Spanning grid column 1 and 2 means going from grid lines 1 to 3. Additionally, if you want to go to the last row or last column, you can use -1. So spanning from column two to the end would look like grid-column: 2 / -1;

    #gallery_pics {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
  grid-template-rows: repeat(4, minmax(300px, 1fr));
  gap: 10px;
}
.gallery_pic {
  width: 100%;
  min-height: 300px;
  border: 1px black solid;
  background-color: rgb(142, 142, 255);
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery_pic:nth-child(1) {
  grid-row: 1/3;
  grid-column: 1/1;
}
.gallery_pic:nth-child(2) {
  grid-row: 1/1;
  grid-column: 2/-1;
}
.gallery_pic:nth-child(3) {
  grid-row: 2/2;
  grid-column: 2/-1;
}
.gallery_pic:nth-child(4) {
  grid-row: 3/3;
  grid-column: 1/3;
}
.gallery_pic:nth-child(5) {
  grid-row: 4/4;
  grid-column: 1/3;
}
.gallery_pic:nth-child(6) {
  grid-row: 3/-1;
  grid-column: 3/3;
}
    <div id="gallery_pics">
  <div class="gallery_pic">1</div>
  <div class="gallery_pic">2</div>
  <div class="gallery_pic">3</div>
  <div class="gallery_pic">4</div>
  <div class="gallery_pic">5</div>
  <div class="gallery_pic">6</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search