grid css - auto creating new grid-template-columns line

Question

I'm a newbie using grid css and there are still things I don't get. I've the next container:

<section class="css-grid">
  <div class="css-item"><img src="1.jpg" /></div>
  <div class="css-item"><img src="2.jpg" /></div>
  <div class="css-item"><img src="3.jpg" /></div>
  <div class="css-item"><img src="4.jpg" /></div>
  <div class="css-item"><img src="5.jpg" /></div>
  <div class="css-item"><img src="6.jpg" /></div>
</section>

With the next CSS code:

section.css-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: 1fr;
    column-gap: $gap-5px;
  }

img {
    width: 100%;
    cursor: pointer;
  }

So far, this is perfect for the single line. It makes to fit the 6 images with a minimum of 250px or a maximum of everything. Thing is, I need that, when resizing down the screen, the new line made makes the first image to take the whole width, and this gets divided by the number of new elements, I mean:

1 image will take the whole width (or 1fr)
2 images will split this between them, so 1fr and 1fr
and so on, getting the same result as above when multiple images are in the same row (on my example when 3 images up and 3 images down).

I've tried defining a grid-template-rows: 1fr but it does nothing. I've tried using grid-auto-columns but nothing. I'm still getting along with css grid but this kind of little stuff I don't see them yet.

Any tips?

Thanks,

--

Edit - Added more info

I'm sorry for the explanation, I have a mess in my head trying to figure this out.

Ok so, this is what looks like with the line:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

example

Then, using media-query, I need that, when resizing under, let's say, 1300px, when a new row is displayed cause the elements don't fit with such size, to occupy the whole width, sharing with next image if there is.

I thought my main line (grid-template-columns) was fine, but wasn't. So I tried something like:

  @media screen and (max-width: 1300px) {
    grid-template-columns: 1fr;
  }

But this, obviously, does not work.

What I need is, instead of: this

I need the a single image to occupy the whole gap:

wanted

If there are two images, 50% for them:

2-images

When there are 3, they are fine:

fine

I hope this time it's a little bit more clear, but I don't think so.

I'm having hard time understanding what you are actually asking for. You are using auto-fit so the elements will be positioned to create as many columns allowed by the minmax constraint.. but then you say you want the first element to take one column by itself and the following lines to adapt to that width and keep arranging their elements in columns fitting that new width still using the previous constraints? what's the width ruling? because if the container will be resized shrinking down below the minimum, the elements will arrange anyway 1 per line — Diego D
– Diego D, Commented Oct 22, 2023 at 16:33
I'm sorry for both of you. I have edited with more info, hope it helps. — JBM
– JBM, Commented Oct 22, 2023 at 18:29
I'm sorry for you because you were over complicating things since the beginning.. you didn't need a grid but a flex container. The answer given correctly fulfills that need with no complications but it's still hard to understand why you came to the media query conclusion and how the resolution is expected to change the arrangement strategy — Diego D
– Diego D, Commented Oct 23, 2023 at 8:20

Sherry · Accepted Answer · 2023-10-23 05:09:14Z

1

Here is the desired behaviour using flex wrap:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .css-flex {
      border: 1px solid;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 5px;
    }
    
    .css-flex>.css-item {
      border: 1px solid;
      min-width: 250px;
      height: 200px;
      flex: 1;
    }
  </style>
</head>

<body>
  <section class="css-flex">
    <div class="css-item"></div>
    <div class="css-item"></div>
    <div class="css-item"></div>
    <div class="css-item"></div>
    <div class="css-item"></div>
    <div class="css-item"></div>
  </section>
</body>

</html>

answered Oct 23, 2023 at 5:09

Sherry

362 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JBM Over a year ago

Thank you so much, sherry!! That worked. I'm still getting used to flexbox and css-grid, that's why I didn't think on using flexbox when I saw on designs it was like a grid. Immediately though on grid-css but flexbow worked perfectly.

Collectives™ on Stack Overflow

grid css - auto creating new grid-template-columns line

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related