动态更改CSS网格中的行数 [英] Dynamically changing the number of rows in a CSS Grid
问题描述
我有一个使用CSS Grid设计的网页.这就是它的样子-
I have a webpage designed using CSS Grid. This is how it looks like -
在某些情况下，我想删除用户名- CSS Grid User ，以使呈现的页面看起来像这样-
There are certain cases where I want to remove the Username - CSS Grid User such that the rendered page looks like this -
我正在 react/redux 项目中使用它.基于变量，我必须显示/隐藏用户的用户名.
I am using this in a react/redux project. Based on a variable, I have to show/hide the username of the user.
因此，我想更改网格的行数，因此尝试使类 display:none 像这样
Thus I want to change the number of rows of the grid, I tried making the class display: none like so
.username {
display: none;
}
但是，它所做的只是删除 CSS Grid User 字符串，但是该行存在，并留有空白.
However, all it does is removes the CSS Grid User string, but the row exists, leaving a blank space.
有什么办法可以动态更改行数/列数.我不想在JS 解决方案中使用 CSS.我有一个普通的CSS文件，用于将样式设置为react组件.
Is there any way where I would be able to change the number of rows/columns dynamically. I don't want to use CSS in JS solutions. I have a plain CSS file that sets styles to the react component.
.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>推荐答案
您可以根据要设置的用户名变量在div.layout元素(或其他父标记)上设置一个类，然后调整CSS网格根据该类重新定义CSS网格列/行.
You could set a class on the div.layout element (or some other parent tag) based on the username variable you are setting, and then adjust your CSS grid to redefine the CSS grid columns/rows based on that class.
(我对React不太熟悉，但是如果有内存可用，您可以像这样有条件地设置一个类)
(I'm not super familiar with React, but if memory serves you can set a class conditionally like this)
<div className={"layout " + (this.props.usernameShown ? 'username-avail' : 'username-unavail')}>
然后在CSS文件中，您可以定义CSS网格，例如
Then in your CSS file, you can define your CSS grid such as
.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);
}
这篇关于动态更改CSS网格中的行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
