Question

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

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

Answer 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));

有关这些功能的更多信息：

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

甚至

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>

CSS Grid使用剩余的可用空间来处理之间的所有元素

2 个答案: