动态改变 CSS Grid 中的行数答案

【问题标题】：Dynamically changing the number of rows in a CSS Grid动态改变 CSS Grid 中的行数
【发布时间】：2018-10-17 11:13:51
【问题描述】：

我有一个使用 CSS Grid 设计的网页。这就是它的样子-

在某些情况下，我想删除用户名 - CSS Grid User 以使呈现的页面看起来像这样 -

我在react/redux 项目中使用它。基于一个变量，我必须显示/隐藏用户的用户名。

因此我想更改网格的行数，我尝试将 display: none 类设为这样

.username {
  display: none;
}

然而，它所做的只是删除 CSS Grid User 字符串，但该行存在，留下一个空格。

有什么方法可以动态更改行数/列数。我不想使用CSS in JS 解决方案。我有一个简单的 CSS 文件，用于设置 react 组件的样式。

.layout {
  display: grid;
  grid-template-columns: minmax(200px, auto) minmax(200px, 300px) minmax(900px, auto) minmax(200px, auto);
  grid-template-rows: 60px 60px 60px minmax(700px, auto);
  grid-gap: 5px;
  height: calc(100vh);
}

.navbar {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  background-color: #3a3f51;
  border-bottom: 1px solid #797d89;
  text-align: center;
  color: aliceblue;
}

.username {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  background-color: #f7f9f9;
  border-bottom: 1px solid #dee5e7;
  text-align: center;
}

.statement-list {
  grid-column: 2 / 3;
  grid-row: 3 / 5;
  max-height: 600px;
  overflow-y: auto;
}

.title {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.content {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
  overflow-x: auto;
  overflow-y: auto;
}

<body class="layout">
  <div class="navbar">About</div>
  <div class="username">CSS Grid User</div>
  <div class="title">Lorem Ipsum</div>
  <div class="statement-list">
    Phasellus commodo sit amet eros non pharetra. Phasellus consequat augue est, ornare finibus lectus auctor non. Praesent rutrum odio tortor. Proin id massa magna. Phasellus commodo sit amet eros non pharetra. Phasellus consequat augue est, ornare finibus
    lectus auctor non. Praesent rutrum odio tortor. Proin id massa magna.
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet a odio quis commodo. In nisl justo, tincidunt vel aliquet eget, mollis eget lorem. Aenean sit amet nibh eget nunc sodales vestibulum id ac ante. Nullam eleifend sodales ipsum, sed
    porta tellus posuere molestie. Vestibulum congue porta odio sed iaculis. Phasellus varius sodales ullamcorper. Praesent consectetur ante eget turpis pretium, eget sagittis leo volutpat. Aenean posuere, sapien quis placerat pulvinar, lectus est interdum
    dui, at pretium risus sapien et neque. Sed eu fringilla turpis. Ut viverra, nisl non euismod sollicitudin, tellus lectus finibus leo, in ornare sem mauris non eros. Fusce augue est, rhoncus vitae tristique in, malesuada nec libero. Sed venenatis vehicula
    ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce interdum auctor ante a fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam malesuada
    scelerisque tortor ac faucibus. Integer pharetra eget velit a tempus. Aenean at lobortis massa, vel accumsan ligula.
  </div>
</body>

【问题讨论】：

标签： html reactjs css css-grid

【解决方案1】：

就个人而言，我喜欢编写自己的函数。所以这将是我的方法......

JavaScript

function removeElementsByClass(className){
    var elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
}

那就……

removeElementsByClass('.username')

当然，选择简单的选项并不丢人（但了解幕后发生的事情会很有帮助）。

jQuery

$('.username').remove();

注意：这只会删除具有指定类名的元素。因此，您要么需要为目标行指定类名，要么通过包含额外的 parentNode 来进一步追溯...

elements[0].parentNode.parentNode.removeChild(elements[0]);

【讨论】：

我在 react 中不建议使用 react/redux 并直接操作 dom。
@yadav_vi -- React 是一个 JavaScript 库。它不是一个框架。它简化了构建用户界面的过程，但仍然使用标准 JavaScript 实现（最好用于快速演示，恕我直言）。 Redux 做得更多，可能是你最关心的一个。不幸的是，它们的简单性也剥夺了控制权——不久之后，你就会遇到这样的问题；相反，通常需要一行来实现的函数需要：stackoverflow.com/questions/43893508/…

【解决方案2】：

您可以根据您正在设置的用户名变量在 div.layout 元素（或其他一些父标记）上设置一个类，然后调整您的 CSS 网格以基于该类重新定义 CSS 网格列/行。

（我对 React 不是很熟悉，但如果没记错的话，你可以像这样有条件地设置一个类）

<div className={"layout " + (this.props.usernameShown ? 'username-avail' : 'username-unavail')}>

然后在您的 CSS 文件中，您可以定义您的 CSS 网格，例如

.layout {
    display: grid;
    grid-template-columns: minmax(200px, auto) minmax(200px, 300px) minmax(900px, auto) minmax(200px, auto);
    grid-gap: 5px;
    height: calc(100vh);
}

.username-avail.layout {
    /* Four rows */
    grid-template-rows: 60px 60px 60px minmax(700px, auto);
}

.username-unavail.layout {
    /* Three rows */
    grid-template-rows: 60px 60px minmax(700px, auto);
}

【讨论】：

干净优雅。谢谢！

【解决方案3】：

一旦您创建了显式轨道，它们是使用以下属性创建的行和列：

grid-template-rows
grid-template-columns
grid-template-areas
grid（简写）

...你被那些轨道卡住了。它们不会消失。

您尝试在网格项 (.username) 上删除带有 display: none 的显式行无法正常工作。该命令在项目级别运行，但行是在容器级别创建的。

如果您想构建一个具有动态流入和流出轨道的网格，则使用隐式而不是显式轨道。

隐式轨道是自动创建的行和列，以容纳位于显式网格之外的网格项目。

当没有网格项占据隐式轨道时，该轨道根本不存在。

根据您的代码，我在下面发布了两个示例。

第一个示例显示一行.username，另一个示例没有；
grid-template-rows 已被移除，因此没有显式行；所有行都是隐式的；
之前在grid-template-rows 上设置的高度已移至各自的网格项；
隐式行高由grid-auto-rows控制，其初始值为auto（基于内容），因此与上一点配合得很好；并且，
因为您正在处理隐式轨道，所以源顺序很重要。

带有用户名行

.layout {
  display: grid;
  grid-template-columns: minmax(200px, auto) minmax(200px, 300px) minmax(900px, auto) minmax(200px, auto);
  grid-gap: 5px;
  height: 100vh;
}


/* implicit first row */
.navbar {
  height: 60px;
  grid-column: 1 / -1;
  background-color: #3a3f51;
  border-bottom: 1px solid #797d89;
  text-align: center;
  color: aliceblue;
}


/* implicit second row */
.username {
  /* display: none; */
  height: 60px;
  grid-column: 1 / -1;
  background-color: #f7f9f9;
  border-bottom: 1px solid #dee5e7;
  text-align: center;
}


/* implicit third row (start) */
.statement-list {
  height: 60px;
  grid-column: 2 / 3;
  max-height: 600px;
}


/* implicit third row */
.title {
  height: 60px;
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.content {
  min-height: 700px;
  grid-column: 3 / 4;
  overflow-x: auto;
  overflow-y: auto;
}

body {
  margin: 0;
}

<body class="layout">
  <div class="navbar">About</div>
  <div class="username">CSS Grid User</div>
  <div class="title">Lorem Ipsum</div>
  <div class="statement-list">
    Phasellus commodo sit amet eros non pharetra. Phasellus consequat augue est, ornare finibus lectus auctor non. Praesent rutrum odio tortor. Proin id massa magna. Phasellus commodo sit amet eros non pharetra. Phasellus consequat augue est, ornare finibus
    lectus auctor non. Praesent rutrum odio tortor. Proin id massa magna.
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet a odio quis commodo. In nisl justo, tincidunt vel aliquet eget, mollis eget lorem. Aenean sit amet nibh eget nunc sodales vestibulum id ac ante. Nullam eleifend sodales ipsum, sed
    porta tellus posuere molestie. Vestibulum congue porta odio sed iaculis. Phasellus varius sodales ullamcorper. Praesent consectetur ante eget turpis pretium, eget sagittis leo volutpat. Aenean posuere, sapien quis placerat pulvinar, lectus est interdum
    dui, at pretium risus sapien et neque. Sed eu fringilla turpis. Ut viverra, nisl non euismod sollicitudin, tellus lectus finibus leo, in ornare sem mauris non eros. Fusce augue est, rhoncus vitae tristique in, malesuada nec libero. Sed venenatis vehicula
    ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce interdum auctor ante a fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam malesuada
    scelerisque tortor ac faucibus. Integer pharetra eget velit a tempus. Aenean at lobortis massa, vel accumsan ligula.
  </div>

没有用户名行（只需添加display: none）

.layout {
  display: grid;
  grid-template-columns: minmax(200px, auto) minmax(200px, 300px) minmax(900px, auto) minmax(200px, auto);
  grid-gap: 5px;
  height: 100vh;
}


/* implicit first row */
.navbar {
  height: 60px;
  grid-column: 1 / -1;
  background-color: #3a3f51;
  border-bottom: 1px solid #797d89;
  text-align: center;
  color: aliceblue;
}


/* implicit second row */
.username {
  display: none; /* ADDED */
  height: 60px;
  grid-column: 1 / -1;
  background-color: #f7f9f9;
  border-bottom: 1px solid #dee5e7;
  text-align: center;
}


/* implicit third row (start) */
.statement-list {
  height: 60px;
  grid-column: 2 / 3;
  max-height: 600px;
}


/* implicit third row */
.title {
  height: 60px;
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.content {
  min-height: 700px;
  grid-column: 3 / 4;
  overflow-x: auto;
  overflow-y: auto;
}

body {
  margin: 0;
}

<body class="layout">
  <div class="navbar">About</div>
  <div class="username">CSS Grid User</div>
  <div class="title">Lorem Ipsum</div>
  <div class="statement-list">
    Phasellus commodo sit amet eros non pharetra. Phasellus consequat augue est, ornare finibus lectus auctor non. Praesent rutrum odio tortor. Proin id massa magna. Phasellus commodo sit amet eros non pharetra. Phasellus consequat augue est, ornare finibus
    lectus auctor non. Praesent rutrum odio tortor. Proin id massa magna.
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet a odio quis commodo. In nisl justo, tincidunt vel aliquet eget, mollis eget lorem. Aenean sit amet nibh eget nunc sodales vestibulum id ac ante. Nullam eleifend sodales ipsum, sed
    porta tellus posuere molestie. Vestibulum congue porta odio sed iaculis. Phasellus varius sodales ullamcorper. Praesent consectetur ante eget turpis pretium, eget sagittis leo volutpat. Aenean posuere, sapien quis placerat pulvinar, lectus est interdum
    dui, at pretium risus sapien et neque. Sed eu fringilla turpis. Ut viverra, nisl non euismod sollicitudin, tellus lectus finibus leo, in ornare sem mauris non eros. Fusce augue est, rhoncus vitae tristique in, malesuada nec libero. Sed venenatis vehicula
    ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce interdum auctor ante a fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam malesuada
    scelerisque tortor ac faucibus. Integer pharetra eget velit a tempus. Aenean at lobortis massa, vel accumsan ligula.
  </div>

规格参考：

【讨论】：

我已经接受了一个有效的答案。不过，这真的很有帮助，谢谢！