CSS 网格。隐藏未使用的区域答案

【问题标题】：CSS Grid. Hide unused areaCSS 网格。隐藏未使用的区域
【发布时间】：2020-07-22 18:49:38
【问题描述】：

我有基于已知元素的网格模板区域，但并非所有元素都可以从数据库中获取。如果我没有从数据库中得到任何东西，那么我就不会渲染 html 元素，我会得到一个带有间隙的空“虚线”行。见附图，空行位于蓝色框下方。是否可以隐藏未使用的区域或消除其中的间隙？

*{
 margin: 0;
 padding: 0;
}

.name {
  grid-area: name;
}

.lastname{
  grid-area: lastname;
}

.phone {
  grid-area: phone;
}

.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-areas: 
    'name name name lastname lastname lastname'
    'somethingelse somethingelse somethingelse . . .'
    'phone phone phone phone phone phone'
    'email email email email email email';
}

<div class="wrapper">
  <div class="field name">
    <div class="titile">Name</div>
    <div class="description">Antony</div>
  </div>
  <div class="field lastname">
    <div class="titile">Last name</div>
    <div class="description">Lastnamed</div>
  </div>
  <div class="field phone">
    <div class="titile">Phone number</div>
    <div class="description">123 456 789</div>
  </div>
</div>

与我的问题无关

This 问题与我的无关，因为我没有空项目。我有空行，没有带间隙的 html 项目

【问题讨论】：

我对 CSS 网格一无所知，但看起来您可以为行和列使用不同的值。 gap: 5px 10px;。或row-gap: 5px; 和column-gap: 10px;
投票重新开放 - 很清楚。并且不同于感知到的重复。
一个月前我遇到了同样的问题。我没有空边框，因为我没有渲染我没有从数据库中获取的块（我使用 Angular 的 *ngIf 来不渲染空的块），所以只有多余的间隙会导致问题。我最终没有使用网格间隙，我只是在块中添加了右边距和底部边距，所以我只有一个“间隙”，即块之间的边距。现在还可以，但是有“可折叠网格间隙”会很好:)
但我会等待几天的解决方案（如果解决方案可以的话）????
这很有趣，我在文档和编辑草稿中写了一点，我没有看到任何与渲染未跟踪区域名称相关的内容。我猜它的实现方式是在模板中给出 area-name，即使没有引用它的类，也会对其进行标记并呈现它。

标签： html css css-grid

【解决方案1】：

一个月前我遇到了完全相同的问题。我没有空边框，因为我没有渲染我没有从数据库中获取的块（我使用 Angular 的*ngIf 来不渲染空的块），所以只有多余的间隙会导致问题。我最终没有使用网格间隙，我只是在块中添加了右边距和底部边距，所以我只有一个“间隙”，即块之间的边距。现在还可以，但是有“可折叠网格间隙”会很好:)

这是我的代码，经过极度简化，当然……请注意，我使用的是 Angular。

HTML：

<div id="container">
  <div id="block-0-0" class="block" *ngIf="data[0][0]">
    <app-block [block-data]="data[0][0]"></app-block>
  </div>
  <div id="block-0-1" class="block" *ngIf="data[0][1]">
    <app-block [block-data]="data[0][1]"></app-block>
  </div>
  <div id="block-1-0" class="block" *ngIf="data[1][0]">
    <app-block [block-data]="data[1][0]"></app-block>
  </div>
  <div id="block-1-1" class="block" *ngIf="data[1][1]">
    <app-block [block-data]="data[1][1]"></app-block>
  </div>
  <!-- etc. -->
</div>

CSS：

div#container {
  display: grid;
  grid-template:
    "block-0-0 block-0-1" auto
    "block-1-0 block-1-1" auto
    /* etc. */
    / 300px 300px;
}

div.block {
  margin: 0 10px 10px 0;
  border: solid 1px gray;
}

div#block-0-0 {
  grid-area: block-0-0;
}

div#block-0-1 {
  grid-area: block-0-1;
}

div#block-1-0 {
  grid-area: block-1-0;
}

div#block-1-1 {
  grid-area: block-1-1;
}

/* etc. */

我想强调这只是一种解决方法。我很高兴看到解决方案 :)

【讨论】：

我知道这是一个快速的答案，但您能否添加一个代码示例以使其更完整？我做了一个快速测试，效果很好。
等一下，我要打开github :) 这是一个私人项目，但是这部分可以共享。
很好的解决方案。很简单，但我会等几天。也许我们可以找到更好的解决方案:)
@Kol 我只会使用 OPs 代码并向元素添加边距值 :)
我添加了一些代码。明天我将创建一个工作 jsfiddle（抱歉，这里快晚上 11:00，我的妻子要杀了我......如果我不放开我的笔记本电脑立即）。

【解决方案2】：

您需要命名模板区域吗？

您能否定义某些网格项目应跨越多少列？

.name { 
  grid-column: span 3;
}

.lastname {
  grid-column: span 3;
}

.phone { 
  grid-column: span 6;
}

.wrapper {
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

【讨论】：

是的。我真的需要命名模板区域
动态渲染grid-template-areas属性，然后使用js。
还有 6 列的模板区域。你建议 2 列）
对，所以设置为 6 列?
总的来说，我在网格上睡着了所有的想法。我意识到最好将网格模板区域用于静态元素，而动态使用按占用的列数和行数绘制

【解决方案3】：

因此，正如我在 cmets 中所写的那样，似乎在使用 grid-gap 和 grid-template-areas 时，即使其中没有内容，template-row 也会被渲染，这使得 grid-gap 无论如何都适用于它。在对文档和编辑草稿进行了深入研究之后，我没有看到任何我们可以操纵 grid-gap 的工作原理并使其对未使用的行轨道做出响应的东西。

我猜grid-gap 需要一些工作，所以你可以向 w3.org 提出问题，或者至少提出来。

我现在的建议是：

选项 1

我可以建议的最佳解决方案（同时仍然使用区域名称和grid-template-areas）：

grid-gap 有很多替代品，您可以为每个单元格内容使用填充或边距，这将完全符合您的要求：

*{
 margin: 0;
 padding: 0px;
}

.name {
  grid-area: name;
  margin: 0px 20px 20px 0px
}

.lastname{
  grid-area: lastname;
  margin: 0px 20px 20px 0px
}

.phone {
  grid-area: phone;
  margin: 0px 20px 20px 0px
}

.email {
  grid-area: email;
  margin: 0px 20px 20px 0px
}

.somethingelse {
  grid-area: somethingelse;
  margin: 0px 20px 20px 0px
}

.wrapper {
  display: grid;
  grid-template-areas: 
    'name name name lastname lastname lastname'
    'somethingelse somethingelse somethingelse . . .'
    'phone phone phone phone phone phone'
    'email email email email email email';
}

<div class="wrapper">
  <div class="field name">
    <div class="titile">Name</div>
    <div class="description">Antony</div>
  </div>
  <div class="field lastname">
    <div class="titile">Last name</div>
    <div class="description">Lastnamed</div>
  </div>
  
  
  <div class="field phone">
    <div class="titile">Phone number</div>
    <div class="description">123 456 789</div>
  </div>
  
  
  
</div>

选项 2

根据需要使用grid-gap，但不使用template-areas，而是渲染行和列取决于应渲染的元素。

请注意，在此解决方案中，divs 的位置很重要。

*{
 margin: 0;
 padding: 0px;
}

.name {
grid-row: 1fr;
  grid-column: 1 / 2;
}

.lastname{
grid-row: 1fr;
  grid-column: 2 / 3;
}

.phone {
grid-row: 1fr;
  grid-column: 1 / 2;
}

.email {
grid-row: 1fr;
  grid-column: 1 / 2;
}

.somethingelse {
grid-row: 1fr;
  grid-column: 1 / 2;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

<div class="wrapper">
  <div class="field name">
    <div class="titile">Name</div>
    <div class="description">Antony</div>
  </div>
  <div class="field lastname">
    <div class="titile">Last name</div>
    <div class="description">Lastnamed</div>
  </div>
  
  
  <div class="field phone">
    <div class="titile">Phone number</div>
    <div class="description">123 456 789</div>
  </div>
  
  
  
  
  
</div>

选项 3

这不会完全符合您的要求，但您可以检查一下：

我考虑过使用相对于网格大小的单位的网格间隙（如果生成更多行，它们之间的间隙会更大，如果不会生成行，那么间隙会相对“缩小” )。

因此您可以使用百分比作为grid-gap 的单位，而不是固定的间隙大小。

*{
 margin: 0;
 padding: 0;
}

.name {
  grid-area: name;
}

.lastname{
  grid-area: lastname;
}

.phone {
  grid-area: phone;
}

.email {
  grid-area: email;
}

.somethingelse {
  grid-area: somethingelse;
}

.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-areas: 
    'name name name lastname lastname lastname'
    'somethingelse somethingelse somethingelse . . .'
    'phone phone phone phone phone phone'
    'email email email email email email';
}

<div class="wrapper">
  <div class="field name">
    <div class="titile">Name</div>
    <div class="description">Antony</div>
  </div>
  <div class="field lastname">
    <div class="titile">Last name</div>
    <div class="description">Lastnamed</div>
  </div>
  <div class="field phone">
    <div class="titile">Phone number</div>
    <div class="description">123 456 789</div>
  </div>
  
</div>

希望它能以某种方式帮助你。

【讨论】：