CSS Grid - right justify specific columns [duplicate]

Question

I am looking for a way to right-justify specific columns (not all columns) in a grid in CSS without having to explicitly specify a special class or style for each column entry. For example:

<style>
    .myclass {
        display: grid;
        grid-template-columns: 100px 100px 100px 100px;
    }
</style>

<div class="myclass">
    <span>AAAA</span>
    <span>BBBB</span>
    <span>CCCC</span>
    <span>DDDD</span>

    <span>EEEE</span>
    <span>FFFF</span>
    <span>GGGG</span>
    <span>HHHH</span>
</div>

So, I want the first and third columns right justified, and the second and fourth columns left justified without having to explicitly specify style or class for each span.

Thanks!

The problem with nth-child selector is that I want it auto-repeated to affect all elements in that column not specified one (nth-children). — Blake McBride
– Blake McBride, Commented May 19, 2020 at 11:57
nth-child can auto repeat to target a group of specific elements — Temani Afif
– Temani Afif, Commented May 19, 2020 at 11:58

Yousaf · Accepted Answer · 2020-05-19 11:58:00Z

3

nth-child selector can do the trick

.myclass {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-gap: 10px;
}

span:nth-child(2n+1) {
  background: #eee;
  display: flex;
  justify-content: flex-end;
}

<div class="myclass">
  <span>AAAA</span>
  <span>BBBB</span>
  <span>CCCC</span>
  <span>DDDD</span>

  <span>EEEE</span>
  <span>FFFF</span>
  <span>GGGG</span>
  <span>HHHH</span>
</div>

answered May 19, 2020 at 11:58

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

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

Collectives™ on Stack Overflow

CSS Grid - right justify specific columns [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related