Как установить другую ширину строки на css

Question

Хорошо, у меня есть сетка с 4 строками и 3 столбцами. Я хочу, чтобы последние 3 строки были как половина размера полной сетки и располагались в центре по горизонтали под 1-й строкой. Я пробовал несколько способов сделать это, и ни один из них не работал так, как вложенная сетка, возможно, я сделал это неправильно.

.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>

Answer 1

Сетка здесь не является простым решением, потому что дорожки сетки создают проблемы с центрированием строки c.

Flex может быть лучшим вариантом для вас. Вот одна концепция:

.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>

Answer 2

Легко сделать все гибким.

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

Answer 3

Чтобы ответить на этот вопрос, я последовал идее Криса о 12 столбцах и о том, что первая строка занимает все 12 столбцов, а остальные - 6 столбцов (с 4-го по 9-й столбец)

Answer 4

Думаю - flex решения от других респондентов довольно хороши. Просто хочу проиллюстрировать, кто это вообще возможно, используя grid. Не претендую на лучшее или самое гибкое решение, но можно использовать сетку.

Подробнее о grid-template-areas здесь 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>