标签: css-grid
伪元素就像CSS网格中的网格项一样
我正在创建一个包含必填字段的表单.为了按要求标记这些,我将一个星号(*)作为一个::before元素并将其向右浮动,使其位于该字段的右上角.
我遇到的问题是这些字段中的一些是使用CSS网格定位的,当我::before向网格添加元素时,它被视为另一个网格项并将所有内容推送到新的网格行.
为什么CSS网格将::before元素视为另一个网格项？如何将星号定位为输入元素？
这是基本的HTML/CSS:
html {
width: 75%;
}
ul {
list-style: none;
}
input {
width: 100%
}
.grid {
display: grid;
grid-template-columns: .33fr .33fr .33fr;
}
li.required::before {
content: '*';
float: right;
font-size: 15px;
}<ul>
<li class="required">
<input type="text">
</li>
<li class="grid required">
<p>one</p>
<p>two</p>
<p>three</p>
</li>
<li class="required">
<input type="text">
</li>
</ul>这是一个小提琴:https://jsfiddle.net/zbqucvt9/
推荐指数
解决办法
查看次数
CSS网格，外部间隙
有没有办法在CSS网格内制作“外部网格间隙”（不仅仅是内部）？我需要在CSS网格周围添加空间，即高度和宽度为100％，就像这样（其中绿色是空间/间隙）：
这是我当前的网格问题的一个小提琴示例：https : //jsfiddle.net/isakglans/4tkg8yfc/
html,body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
position : relative;
height: 100%;
width: 100%;
}
#content {
height: 100%;
width: 100%;
position : absolute;
display: grid;
background-color: green;
grid-gap : 1em;
grid-template-columns: 1fr 1fr;
}
#content div {
background-color: blue;
}
.box1 {
grid-column: 1;
grid-row: 1;
}
.box2 {
grid-column: 1;
grid-row: 2;
}
.box3 {
grid-column: 2;
grid-row: 1;
}
.box4 {
grid-column: 2;
grid-row: 2;
}
编辑： 我不想让滚动条出现-我也不想做溢出：隐藏以隐藏它们。
推荐指数
解决办法
查看次数
如果我们在CSS网格中有更多列,为什么内容大小不同？
为什么这样:
div {
width: 200px;
display: grid;
grid: "first second" / 1fr 1fr;
background-color: #ccc;
padding: 8px;
}
#first {
grid-area: first;
}
#second {
grid-area: second;
}<div>
<input id="first" />
<input id="second" />
</div>与此不同的是:
div {
width: 200px;
display: grid;
grid: "first first second second" / 1fr 1fr 1fr 1fr;
background-color: #ccc;
padding: 8px;
}
#first {
grid-area: first;
}
#second {
grid-area: second;
}<div>
<input id="first" />
<input id="second" />
</div>请注意,我唯一改变的是列数和每个输入占用的区域.
推荐指数
解决办法
查看次数
CSS网格：将正方形单元与具有一致网格间隙的容器边缘对齐？
目的是使方形单元格与其容器的前缘和后缘对齐，同时在每一行之间以及每一行之间实现一致的间隙。
该Codepen是紧密的，但存在两个问题：（1）垂直间隙与水平间隙不同；（2）正方形与前边缘齐平，但与后边缘不齐平。
https://codepen.io/anon/pen/wREmjo
ul {
display: grid;
width: 260px;
grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
grid-auto-rows: 1fr;
grid-gap: 10px;
list-style-type: none;
border: 2px solid black;
box-sizing: border-box;
margin: 0;
padding: 0;
background: gray;
}
li {
width: 40px;
height: 40px;
}<ul class="palette">
<li style="background-color: rgb(0, 0, 255);"></li>
<li style="background-color: rgb(51, 51, 51);"></li>
<li style="background-color: rgb(203, 58, 135);"></li>
<li style="background-color: rgb(237, 106, 90);"></li>
<li style="background-color: rgb(155, 193, 188);"></li>
<li style="background-color: rgb(255, 247, 174);"></li>
<li style="background-color: rgb(184, 51, 106);"></li>
<li style="background-color: rgb(61, 44, …推荐指数
解决办法
查看次数
当我将鼠标悬停在它们上面时,为什么只有一些CSS网格框在扩展？
我是CSS的网格新手,但我想尝试一下.我有一个3x3盒子的网格.当我将鼠标悬停在一个盒子上时,它应该应该排出整行...但是这不起作用.
当我将鼠标悬停在1屏幕上时,它会完全填满屏幕,当我将鼠标悬停在3屏幕上时,它会开始闪烁并且无法正常工作.
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, minmax(100px, auto));
grid-template-rows: repeat(3, minmax(100px, auto));
}
[class^="item"] {
text-align: center;
box-sizing: border-box;
padding: 10%;
font-size: 5em;
color: #0580d5;
transition: .2s;
}
[class^="item"]:hover {
grid-column-start: 1;
grid-column-end: 4;
}
.item-1 {
/*grid-area: 1 / 2 / span 2 / span 2;*/
}
.container>div {
border: 2px solid #0580d5;
background-color: rgba(40, 180, 240, .3);
border-radius: 5px;
}
@media only screen and (min-width: 789px) {
.container {
grid-template-columns: …推荐指数
解决办法
查看次数
CSS：如何更改显示网格以使用CSS选择器有条件地伸缩？
我有一个网格，其中填充了Vue中v-for循环中的元素。另外，我有一个搜索栏，可根据输入来减少网格元素。如果元素数大于3，则看起来不错，但是当我只剩下2个元素时，它的间距就太大了。因此，我想更改显示：grid; 显示：flex; 如果网格中的元素小于3。
我尝试过CSS选择器，也许是因为我对编程还很陌生，所以做错了。我知道如何使用JavaScript添加动态类，但是，我想看看使用纯CSS是否可能。
尝试了以下css选择器及其变体：
.grid-container {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(290px, 1fr) );
grid-gap: 3rem;
}
.grid-container:first-child:nth-last-child(n + 2) {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: auto;
align-content: center;
}
推荐指数
解决办法
查看次数
如何在最大宽度容器内制作网格项目以跨越整个宽度？
CSS 网格位于具有以下内容的页面上max-width：
body {
outline: 1px solid black;
}
.max-width {
max-width: 400px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.first-grid-item {
grid-column: 1 / -1;
background-color: #ccc;
}
.second-grid-item {
grid-column: 1 / -1;
background-color: tomato;
}
@media (min-width: 576px) {
.max-width {
max-width: 500px;
}
.first-grid-item {
grid-column: 1 / 9;
}
.second-grid-item {
grid-column: 9 / 13;
}
}<div class="max-width">
<div class="grid">
<div class="first-grid-item">First</div>
<div class="second-grid-item">Second</div>
</div>
</div>在较小的屏幕上，布局会发生变化，第二个网格项位于第一个下方： …
推荐指数
解决办法
查看次数
防止CSS网格导致溢出
我有一个 CSS 网格，但我发现网格行并不都适合页面 - 相反，它们会导致溢出。如何调整网格行的大小，以免它们溢出页面？我认为该1fr值应该这样做，但它似乎在我的代码中不起作用。
我已经查看了防止内容扩展网格项目并尝试了那里的建议答案（例如更改grid-template-rows: repeat(5, 1fr)为grid-template-rows: repeat(5, minmax(0, 1fr));但无济于事。
我试过添加height: 100%到网格中，它是容器，但它仍然溢出。
JsFiddle https://jsfiddle.net/4g9b2qkL/
body,
html {
margin: 0;
height: 100%;
}
#container {
display: grid;
grid-template-columns: 1fr 5fr;
height: 100%;
}
#left {
grid-column: 1 / 2;
background: lightblue;
height: 100%;
}
#right {
grid-column: 2 / 3;
height: 100%;
}
#results {
display: grid;
grid-template-rows: repeat(5, 1fr);
height: 100%;
}
img {
max-height: 100%;
max-width: 100%;
} …推荐指数
解决办法
查看次数
CSS网格体育场形状
我一直在尝试在 CSS Grid 上使用下图，但结果非常具有挑战性
该图像代表一个体育场，但很难使它看起来像所附的图像。几点考虑
角是三角形，所以最难的部分是使它们具有那种形状并且响应迅速。
我可以使用 CSS Mask 来处理形状和间距，但这会切断几个圆圈。
我做了我的尝试，错误和错误，并成功了一半。知道如何使它工作吗？或者如果有人有不同的方法也会帮助我
https://jsfiddle.net/rodboc/9psa4bg3/1/
有什么想法吗？
.grid {
max-width: 80vw;
min-height: 90vh;
display: grid;
grid-gap: 5px;
grid-template-columns: 30% [main-start] 40% [main-end] 30%;
grid-template-rows: 20% [main-start] 30% [main-end] 20%;
margin: 0 auto;
}
[class^="item"] {
background-color: blue;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
}
.item1 {
background-color: red;
grid-area: main;
}
.circle {
width: 5px;
height: 5px;
overflow: hidden;
background: #ccc;
border-radius: 50%;
margin: 1px;
padding: 0;
} …推荐指数
解决办法
查看次数
如何使用CSS网格跳过一列？
我需要将中间的网格项保持为空。我认为使用以下属性是可能的：grid-template-areas
grid-template-areas:
"header . header"
"main . ."
"footer . footer";
但不幸的是，这并没有给出正确的显示。
所以我使用了 5 个名为 item-a 到 item-e 的类，然后在 css 中设置了网格中的正确位置。然而，这感觉不是一种非常有效的方法。有谁知道如何使它更有效？
grid-template-areas:
"header . header"
"main . ."
"footer . footer";
.content-container {
width: 51.5em;
height: 30em;
padding: 2.125em 1.5em;
display: grid;
grid-template-columns: 45% auto 45%;
grid-template-rows: auto;
}
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-b {
grid-column: 3;
grid-row: 1 / 3;
}
.item-c {
grid-column: 1;
grid-row: 2 / 3;
}
.item-d {
grid-column: …推荐指数
解决办法
查看次数