CSS Grid использует остальную часть свободного пространства для всех элементов между

как я могу добиться в CSS-GRID что-то вроде «всех элементов между»? Возможно ли это сделать без определения всех этих областей для каждого элемента?

<div id="menu">
    <div class="element"><a class="active" href="#home">A</a></div>
    <div class="element"><a href="#home">B</a></div>
    <div class="element"><a href="#home">C</a></div>
    <div class="element"><a href="#home">D</a></div>
</div>

#menu
{
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 25% <all_elements> 25%;
    grid-template-areas: "... <all_elements> ...";      
}

Или мне действительно нужно сделать что-то вроде

<div container>
    placeholder
    div menu
    placeholder
</div>
0
задан 13 August 2018 в 15:46

1 ответ

Вы можете легко сделать это с помощью flexbox:

#menu {
  display: flex;
  border:1px solid;
}
#menu > * {
  flex:1;
  border:1px solid red;
}
#menu:before,
#menu:after {
  content:"";
  width:25%;
}
<div id="menu">
  <div class="element"><a class="active" href="#home">A</a></div>
  <div class="element"><a href="#home">B</a></div>
  <div class="element"><a href="#home">C</a></div>
  <div class="element"><a href="#home">D</a></div>
</div>

2
ответ дан 15 August 2018 в 16:59

Другие вопросы по тегам:

Похожие вопросы: