CSS 网格.隐藏未使用区域 [英] CSS Grid. Hide unused area

问题描述

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

*{边距:0；填充:0；}.姓名 {网格区域:名称；}.姓{网格区域:姓氏；}.电话 {网格区域:电话；}.包装{显示:网格；网格间距:20px；网格模板区域:'名字名字名字姓氏姓氏''别的东西别的东西...''电话电话电话电话电话''电子邮件电子邮件电子邮件电子邮件电子邮件电子邮件';}

<div class="字段名"><div class="title">名称</div><div class="description">安东尼</div>
<div class="字段姓氏"><div class="title">姓氏</div><div class="description">姓氏</div>

<div class="外地电话"><div class="title">电话号码</div><div class="description">123 456 789</div>

与我的问题无关

这个问题无关给我的，因为我没有空的物品.我有空行，没有带间隙的 html 项目

解决方案

您需要命名模板区域吗?

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

.name {网格列:跨度 3；}.姓 {网格列:跨度 3；}.电话 {网格列:跨度 6；}.包装{间隙:10px；显示:网格；网格模板列:重复(6，1fr)；}

I have grid-template-areas that builds on known elements, but not all elements can be fetched from the database. If I don’t get something from the database, then I don’t render the html element and I get an empty "dashed" rows with gaps. See the attached picture, empty rows are located under the blue boxes. Is it possible to hide unused areas or remove gaps from them?

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

NOT RELATED TO MY QUESTION

This question is not related to mine, because I don't have empty item. I have empty row without html items with gaps

解决方案

Do you need named template areas?

Could you just define how many columns certain grid items should span?

.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);
}

这篇关于CSS 网格.隐藏未使用区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！