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

Html – How to align grid elements to the right column?

I have a fixed number of columns in a CSS Grid display, and elements to put in these columns. The number of elements to put is smaller than the number of columns.

I would like the columns to be aligned to the right, in the order where the elements were added. In the code below, 4 elements are aligned to the left, and 6 other are emty to their right:

.hello {
  border-style: solid;
  border-color: blue;
}

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(10, 5rem);
}
<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>
</div>

I would like to change this display from the one above:

1    2    3    4    empty  empty  empty  empty  empty  empty

to

 empty  empty  empty  empty  empty  empty   1    2    3    4

I tried all kinds of combinations of [align,justify]-[content,items] but never to the right one. Is this doable with CSS Grid?

Tags:

4

Answers


  1. 0

    Since the number is limited, you can define all of them manually

    .hello {
  border-style: solid;
  border-color: blue;
}

.container {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(10, 3rem);
  margin: 5px;
}

.container > :nth-last-child(1) {grid-column-end: -1}
.container > :nth-last-child(2) {grid-column-end: -2}
.container > :nth-last-child(3) {grid-column-end: -3}
.container > :nth-last-child(4) {grid-column-end: -4}
.container > :nth-last-child(5) {grid-column-end: -5}
.container > :nth-last-child(6) {grid-column-end: -6}
.container > :nth-last-child(7) {grid-column-end: -7}
.container > :nth-last-child(8) {grid-column-end: -8}
.container > :nth-last-child(9) {grid-column-end: -9}
    <div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>
</div>

<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
</div>

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

    But better use flexbox:

    .hello {
  border-style: solid;
  border-color: blue;
  width: 3rem;
}

.container {
  display: flex;
  gap: 5px;
  width: calc(10*3rem + 9*5px);
  margin: 5px;
}

.container > :first-child {margin-left:auto}
    <div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>
</div>

<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
</div>

<div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>
  <div class="hello">5</div>
  <div class="hello">6</div>
</div>
    Login or Signup to reply.
  2. 0

    I have used CSS code, the :nth-child() pseudo-class is used to target specific elements with the class .hello and adjust their grid positioning.

    .hello {
  border-style: solid;
  border-color: blue;
}

 .container {
      display: grid;
      grid-gap: 5px;
      grid-template-columns: repeat(10, 5rem);
      align-content: flex-end;
    }
    
    .hello:nth-child(-n+4) {
  grid-row: 2;
  grid-column: span 1;
}

.hello:nth-child(n+5) {
  grid-row: 1;
  grid-column: span 1;
}
    <div class="container">
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>
    <div class="hello">empty</div>
     <div class="hello">empty</div>
      <div class="hello">empty</div>
       <div class="hello">empty</div>
        <div class="hello">empty</div>
         <div class="hello">empty</div>
</div>
    Login or Signup to reply.
  3. 0 
    .hello {
  border-style: solid;
  border-color: blue;
  
  min-width:20px;
}

.container {
  display: flex;
  gap: 5px;
  flex-direction: row;
  justify-content:flex-end;
}
    <div class="container">
  <div class="hello"></div>
  <div class="hello"></div>
  <div class="hello"></div>
  <div class="hello"></div>
  <div class="hello"></div>
  <div class="hello"></div>
  <div class="hello">1</div>
  <div class="hello">2</div>
  <div class="hello">3</div>
  <div class="hello">4</div>

</div>

    If your number of empty rows are dynamic,You should use javascript/jquery/ts for creating DIVs that will repeat

    Used Flex instead of GRID.

    Gap is the distance between flex elements.You can adjust it however u want.

    justify-content:flex-end;

    used For aligning all Divs to the right.

    min-width:20px; is added so that to show that divs wil have a minimum width.

    Flex=1 can be used so that all the divs inside flex have equal width.
    flex: 1; in .hello Class

    Login or Signup to reply.
  4. 0

    How about adding empty elements to fill the grid?

    .container {
  display: grid;
  grid-template-columns: repeat(10, auto);
  grid-gap: 5px;
  
  margin: 8px auto;
  width: min-content;
  border: solid 2px red;
  padding: 4px;
}

.container>div {
  border: solid 2px green;
  padding: 4px 12px;
}

.container>div:empty {
  order: -1;
  visibility: hidden;
}
    <div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search