Список на CSS Grid Layout?

253

21 апреля 2018, 15:53

Имеется список:

<ul class="grid">
<li class="item">item 1</li>
<li class="item">item 2 long</li>
<li class="item">item 3 long long</li>
<li class="item">item 4</li>
<li class="item">item 5 long</li>
</ul>

Как правильно задать css, чтобы список получился горизонтальный с выравниваем по левому краю?
Учитывая пункт выше, как правильно прижать последний элемент списка к правому краю?

UPD: про флексы знаю, хочу понять, как это делают на гридах...

Answer 1

Если я правильно понял вопрос, то вот так:

body{ 
  margin: 0; 
} 
.grid { 
  height: 400px; 
  color: #fff; 
  display: grid; 
  grid-template-areas: "e d c b a"; 
} 
.block1 { 
  grid-area: a; 
  background: red; 
} 
.block2 { 
  grid-area: b; 
  background: green; 
} 
.block3 { 
  grid-area: c; 
  background: blue; 
} 
.block4 { 
  grid-area: d; 
  background: purple; 
} 
.block5 { 
  grid-area: e; 
  background: black; 
}

<div class="grid"> 
   <div class="grid__item block1">Grid Item 1</div> 
   <div class="grid__item block2">Grid Item 2</div> 
   <div class="grid__item block3">Grid Item 3</div> 
   <div class="grid__item block4">Grid Item 4</div> 
   <div class="grid__item block5">Grid Item 5</div> 
</div>