代码之家 › 专栏 › 技术社区 › UbuntuCore

CSS网格将剩余的可用空间用于

css-grid frontend css html

UbuntuCore · 技术社区 · 6 年前

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

2 回复 | 直到 6 年前

SuperDJ Franklin Rivero 6 年前

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

Temani Afif 6 年前

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

推荐文章

Bear Bile Farming is Torture · 如何让div在溢出时水平滚动文本,而不是插入新行

2 年前

lucasferreira96 · 我可以同时使用Python和PHP吗?[已关闭]

2 年前

Tomas Gil Amoedo · 为什么我的形象没有触及这一边的边界?

2 年前

Hm Elius Hossain Himel · 为什么我们要在HTML5的body元素中写header和footer元素?

2 年前

Mateus Lima · 我怎么修?我需要一个透明的导航栏

2 年前

Mays Majeed · 安慰性反应

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

minsu123 · 如何解析react中的单个引用?

2 年前

Lautaro Rojas · 如何使用css有意地包装元素?

2 年前

Noob · 尝试访问React对象

2 年前