How to have a different row width on css

Question

Ok so I have a grid that has 4 rows and 3 columns, I will like to make the last 3 rows to be like half the size of the full grid and to be in the horizontal center below the 1st row. I have tried multiple ways to do that and none of them have worked like having a nested grid, maybe I did it wrong.

.user-header {
  justify-content: center;
  align-self: center;
}

.user-header .grid-header {
  width: 46%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 15% 30% 30% 45%;
  grid-gap: .2rem;
  grid-auto-flow: row;
}

.grid-header-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-header-item:nth-child(10) {
  grid-column: 1 / span 3;
  grid-row: 4;
  width: 100%;
  display: block;
}

<div class="user-header">
  <div class="grid-header">
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey 
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
  </div>
</div>

@focus.style I will add that image right now, I tryed my best to do it on pait. — Juan Martin Zabala
– Juan Martin Zabala, Commented Jun 18, 2020 at 0:33

Maciej Gromadzki · Accepted Answer · 2020-06-18 01:09:28Z

1

Easily you could make all in flex.

Html:

<div id=“user-header”>
     <div class=“header-item-long”>
      <div class=“header-text”>
       Hey
      </div>
      <div class=“header-text”>
       Hey
      </div>
      <div class=“header-text”>
       Hey
      </div>
     </div>
     <div class=“header-item-small”>
      <div class=“header-text”>
       Hey
      </div>
      <div class=“header-text”>
       Hey
      </div>
      <div class=“header-text”>
       Hey
      </div>
     </div>
     <div class=“header-item-small”>
      <div class=“header-text”>
       Hey
      </div>
      <div class=“header-text”>
       Hey
      </div>
      <div class=“header-text”>
       Hey
      </div>
     </div>
     <div class=“header-item-large”>
      <div class=“header-text”>
       Hay
      </div>
    </div>

CSS:

#user-header {
width: 100%;
height: your size;
display: flex;
flex-direction: column;
}

#user-header .header-item-long {
Width:100%;
Height: your size;
Display: flex;
Flex-direction: row;
Justify-content:center;
}

#user-header .header-item-small {
Width: 100%;
Height: your size;
Display: flex;
Flex-direction: row;
Justify-content: center;
Padding: 0 50px;
}

#user-header .header-item-large {
Width: 100;
Height: your size;
Display: flex;
Flex-direction: row;
Align-items: center;
Justify-content: center;
}

answered Jun 18, 2020 at 1:09

Maciej Gromadzki

1318 bronze badges

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

8 Comments

Maciej Gromadzki Over a year ago

If missing something let me know :) writing on phone

MilkyTech Over a year ago

make the grid 12 columns with each item in the first row 4 columns each, then the next 3 rows, each item is 2 columns each starting at column 4, etc.

Juan Martin Zabala Over a year ago

@MaciejGromadzki The code seems to work except that the first header-item-small on the html is not align to the second one, this is because in my actual code the first header-item-small (represents numbers) and the second one shows (text) It is like IG following follower posts counter.

Maciej Gromadzki Over a year ago

@JuanMartinZabala you can try to set up a container inside with width let’s say 200/300 px. That could help

Juan Martin Zabala Over a year ago

@ChrisL can you help me with an answer please?

|

Michael Benjamin · Accepted Answer · 2020-06-18 01:17:04Z

1

Grid is not a simple solution here because grid tracks make centering on the row problematic.

Flex may be a better option for you. Here's one concept:

.grid-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 46%;
}

.grid-header-item:nth-child(-n + 3) {
  flex: 1 0 26%;
  margin-left: 5px;
}

.grid-header-item:nth-child(n + 4) {
  flex: 0 0 24%;
  margin-left: 5px;
}

.grid-header-item:last-child {
  flex-basis: calc(72% + 10px);
}

.grid-header-item {
  margin-bottom: 5px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
}

* {
  box-sizing: border-box;
}

<div class="user-header">
  <div class="grid-header">
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>    
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>
    <div class="grid-header-item">Hey</div>    
  </div>
</div>

answered Jun 18, 2020 at 1:17

Michael Benjamin

376k110 gold badges616 silver badges737 bronze badges

2 Comments

Juan Martin Zabala Over a year ago

Hey Michael, by some reason, your code is appearing on a single column on my server, can that be something to do with user-header css?

Michael Benjamin Over a year ago

Not sure why. Maybe update your question with more code.

focus.style · Accepted Answer · 2020-06-18 09:51:12Z

I think - flex solutions from other answerers are pretty nice. Just want to illustrate who is this even possible using grid. Not pretending on the best or the most flexible solution, but it is possible using grid too.

More about grid-template-areas here https://www.w3schools.com/cssref/pr_grid-template-areas.asp

.grid-header {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-auto-rows: 15% 30% 30% 45%;
  grid-template-areas:
    'r1c1 r1c1 r1c1 r1c1 r1c2 r1c2 r1c2 r1c2 r1c3 r1c3 r1c3 r1c3' 
    '. . . r2c1 r2c1 r2c2 r2c2 r2c3 r2c3 . . .'
    '. . . r3c1 r3c1 r3c2 r3c2 r3c3 r3c3 . . .'
    '. . . r4c1 r4c1 r4c1 r4c1 r4c1 r4c1 . . .';
  grid-gap: .2rem;
}

.grid-header-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: cyan;
}
.grid-header-item:nth-child(1) {grid-area: r1c1;}
.grid-header-item:nth-child(2) {grid-area: r1c2;}
.grid-header-item:nth-child(3) {grid-area: r1c3;}
.grid-header-item:nth-child(4) {grid-area: r2c1;}
.grid-header-item:nth-child(5) {grid-area: r2c2;}
.grid-header-item:nth-child(6) {grid-area: r2c3;}
.grid-header-item:nth-child(7) {grid-area: r3c1;}
.grid-header-item:nth-child(8) {grid-area: r3c2;}
.grid-header-item:nth-child(9) {grid-area: r3c3;}
.grid-header-item:nth-child(10) {grid-area: r4c1;}

<div class="user-header">
  <div class="grid-header">
    <div class="grid-header-item">
      Hey 
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey 
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
    <div class="grid-header-item">
      Hey
    </div>
  </div>
</div>

Juan Martin Zabala · Accepted Answer · 2020-06-25 22:21:49Z

0

To answer this question I followed Cris's idea of having 12 columnsand that the first row ocupies the whole 12 columns while the rest of them occopied 6 columns(from 4th to 9th column)

answered Jun 25, 2020 at 22:21

Juan Martin Zabala

8112 gold badges12 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to have a different row width on css

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related