как я могу добиться в 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>
Вы можете легко сделать это с помощью 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>