Question 395842 in CSS Question posted in
Some basic documentation can be found here.

Css – How to place a single item on a responsive grid row?

I am using a grid to place cards. The grid is responsive using minimax and auto-fit:

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

But, I would like to have a single card in the first row, such that the card does not span (i.e. it is the same width as the cards in the following rows).

So, here are the desired layouts for 1-3 columns (depending on screen width) where x means "card" and . means "empty space":

x
x
x

x .
x x
x x

x . .
x x x
x x x
x x x

I have tried specifying grid-row for the 2nd card onward but since I do not know in advance how many columns there will be (responsive grid template), I do not know.

I would need a property like min-grid-row.

EDIT:

  • I cannot place the first item outside the grid because I want all cards to have the same width (responsive)
Tags:

2

Answers


  1. 0

    you can use mediaquerie to set your number of columns and dispatch the first card always in the first cell, then add a pseudo or two while you have 2 or 3 columns.

    Because of 3 cols max, pseudos can easily be used.

    example below of the idea

    div {
  display: grid;
}

p:first-child {
  grid-column: 1;
  grid-row: 1;
}


/*set your grid according to the media's width */

@media (min-width: 750px) {
  div {
    grid-template-columns: repeat(3, 1fr);
  }
  /* fill the gaps */
  div::before,
  div::after {
    content: "";
    grid-row: 1;
    order: -1;
  }
}

@media (max-width: 750px) {
  div {
    grid-template-columns: repeat(2, 1fr);
  }
  /* fill the gap */
  div::before {
    content: "";
    grid-row: 1;
  }
  div::after {
    display: none;/* no need here */
  }
}

@media (max-width: 550px) {
  div {
    grid-template-columns: 1fr;
    /* you could also turn it to display:block */
  }
  div::before,
  div::after {
    display: none;/* no need here */
  }
}


/* demo makeup */

div {
  gap: 1em;
  padding: 1em;
  max-width: 1200px;
  /* whatever*/
  margin: auto;
  background: yellow;
}

p {
  border: solid;
  padding: 1em;
  margin: 0;
  text-align: center;
  background: lightblue;
}
    <div>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  </div
    Login or Signup to reply.
  2. 0

    You can get close by placing a pseudo-element in row 1 (here colored blue) that spans the the end column (with a min-width matching you min-column width).

    Then at the smallest width (say) mobile, you disable the pseudo-element in a media query.

    https://codepen.io/Paulie-D/pen/bGPbBNr

    .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .5em;
}

.grid:after {
  content: "";
  grid-row: 1;
  grid-column: 2 / -1;
  min-width: 250px;
  background: lightblue;
}

.item {
  border: 1px solid grey;
  text-align: center;
}

@media (max-width: 520px) {
  .grid::after {
    background: pink;
    content: none;
  }
}
    <div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search