CSS Grid populate items from the end

user_1798341 0
Viewed 48

I have the following grid that are used to show filter options:

+------------------------------------------------------------------------------------------+
|                                                                                          |
| +-----------+  +-----------+  +-----------+  +-----------+  +-----------+  +-----------+ |
| |     1     |  |     2     |  |     3     |  |     4     |  |     5     |  |     6     | |
| +-----------+  +-----------+  +-----------+  +-----------+  +-----------+  +-----------+ |
|                                                                                          |
+------------------------------------------------------------------------------------------+

Here's the relevant CSS:

  min-height: 0; /* NEW */
  min-width: 0; /* NEW; needed for Firefox */
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(6, 1fr);

  @media (max-width: 991.98px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 575.98px) {
    width: 100%;
    grid-gap: 0;
  }

Now I have a new requirement that requires me do hide any filter options which would result in an empty list. Suppose only items 1, 2 and 3 (it could be any of the six in any quantity though) are to be shown, then currently I have:

+------------------------------------------------------------------------------------------+
|                                                                                          |
| +-----------+  +-----------+  +-----------+                                              |
| |     1     |  |     2     |  |     3     |                                              |
| +-----------+  +-----------+  +-----------+                                              |
|                                                                                          |
+------------------------------------------------------------------------------------------+

What I need is for it to show like this:

+------------------------------------------------------------------------------------------+
|                                                                                          |
|                                              +-----------+  +-----------+  +-----------+ |
|                                              |     1     |  |     2     |  |     3     | |
|                                              +-----------+  +-----------+  +-----------+ |
|                                                                                          |
+------------------------------------------------------------------------------------------+

Can I reach this result with CSS grid or should I use something else?

css-grid css
1 Answers

Since it's only 6 columns (or 3) you can use nth-last-child to explicitely place the elements:

.box {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  border:1px solid #000;
  margin:10px;
}
.box > * {
   font-size:20px;
   background:red;
   color:#fff;
}
@media (max-width: 991.98px) {
  .box {
    grid-template-columns: repeat(3, 1fr);
  }
}

.box > *:nth-last-child(1) { grid-column:-2}
.box > *:nth-last-child(2) { grid-column:-3}
.box > *:nth-last-child(3) { grid-column:-4}
.box > *:nth-last-child(4) { grid-column:-5}
.box > *:nth-last-child(5) { grid-column:-6}

@media (max-width: 991.98px) {
  .box > *:nth-last-child(4) { grid-column:-2}
  .box > *:nth-last-child(5) { grid-column:-3}
}
<div class="box">
  <div>1</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Or like below:

.box {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  border:1px solid #000;
  margin:10px;
}
.box > * {
   font-size:20px;
   background:red;
   color:#fff;
}
@media (max-width: 991.98px) {
  .box {
    grid-template-columns: repeat(3, 1fr);
  }
}

.box > *:nth-last-child(1) { grid-column:-2}
.box > *:nth-last-child(2) { grid-column:-3}
.box > *:nth-last-child(3) { grid-column:-4}
.box > *:nth-last-child(4) { grid-column:-5}
.box > *:nth-last-child(5) { grid-column:-6}

@media (max-width: 991.98px) {
  .box > *:nth-last-child(1):nth-child(1),
  .box > *:nth-last-child(1):nth-child(2) { grid-column:-2}
  .box > *:nth-last-child(2):nth-child(1) { grid-column:-3}
  
  .box > *:nth-last-child(1) { grid-column:auto}
  .box > *:nth-last-child(2) { grid-column:auto}
  .box > *:nth-last-child(3) { grid-column:auto}
  .box > *:nth-last-child(4) { grid-column:auto}
  .box > *:nth-last-child(5) { grid-column:auto}
}
<div class="box">
  <div>1</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

user_86203330
Related