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;
}

user_13338535 · Answer

Easily you could make all in flex.

Html:

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;
}

user_3597276 · Answer

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;
}


  
    Hey
    Hey    
    Hey
    Hey
    Hey
    Hey
    Hey
    Hey
    Hey
    Hey

user_3187127 · Answer

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;}

user_13407812 · Answer

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)

How to have a different row width on css

4 Answers