CSS Grid 将剩余的可用空间用于所有元素之间答案

【问题标题】：CSS Grid use the rest of free space for all elements betweenCSS Grid 将剩余的可用空间用于所有元素之间
【发布时间】：2019-01-20 04:58:00
【问题描述】：

如何在 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>

【问题讨论】：

据我所知，一般来说，在 CSS 中的元素之间不可能进行选择。也许你可以用repeatdeveloper.mozilla.org/en-US/docs/Web/CSS/repeat做点什么

标签： html css frontend css-grid

【解决方案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】：

使用 CSS 网格，您可以执行以下操作：

#menu
{
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    padding: 0 25%;
}

.element {
  grid-column: auto;
}

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

当您有未指定数量的列时，您也可以使用：

grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));

甚至

var menu = document.getElementById('menu');

var elements = document.getElementsByClassName('element');

menu.style.setProperty( '--columns', elements.length );

#menu
{
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr); 
    padding: 0 25%;
}

.element {
  grid-column: auto;
}

:root {
  --columns: 4; /* Default amount of columns */
}

<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 class="element"><a href="#home">E</a></div>
    <div class="element"><a href="#home">F</a></div>
</div>

【讨论】：