那些遇到过的问题

标签: 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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

这是一个小提琴:https://jsfiddle.net/zbqucvt9/

html css css3 pseudo-element css-grid

And*_*rea
2017 08-10
5
推荐指数
1
解决办法
2335
查看次数

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;
}
Run Code Online (Sandbox Code Playgroud)

编辑： 我不想让滚动条出现-我也不想做溢出：隐藏以隐藏它们。

css css3 css-grid

Olo*_*f84
2017 11-07
5
推荐指数
0
解决办法
2969
查看次数

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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, …
Run Code Online (Sandbox Code Playgroud)

html css css-grid

Cra*_*lot
2019 01-10
5
推荐指数
1
解决办法
108
查看次数

当我将鼠标悬停在它们上面时,为什么只有一些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: …
Run Code Online (Sandbox Code Playgroud)

html css alignment css3 css-grid

Myz*_*394
2019 02-23
5
推荐指数
1
解决办法
88
查看次数

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;
}
Run Code Online (Sandbox Code Playgroud)

css css-selectors flexbox css-grid vue.js

Ing*_*nga
lucky-day
5
推荐指数
1
解决办法
114
查看次数

有没有办法缩小某些网格间隙？

我已经设置了一个网格模板，但前端模板层出现了问题。基本上，有时分配了网格区域的 div 有条件地渲染到页面上。由于我有一个grid-row-gap声明，它保留了页面上不存在的网格模板区域的间隙。我想知道当这种事情发生时是否有办法缩小这些差距。

.grid {
  display: grid;
  grid-template-areas:
    'a b'
    'a c'
    'a d'
    'a e'
    'a f';
  grid-gap: 25px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 1px solid #000;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <!-- <div class="c cell">C</div> …
Run Code Online (Sandbox Code Playgroud)

css css-grid

Car*_*rds
2020 11-19
5
推荐指数
1
解决办法
2213
查看次数

在一行中渲染网格项 - ReactJS 和 Material-UI

我想创建一个材质 ui 轮播，在同一行中有 3 个可见项目。当缩小浏览器的宽度时，我希望这些项目仍位于一行中，并隐藏那些不适合的项目。

这是全屏时：

在此输入图像描述

这就是我想要的：

在此输入图像描述

但这就是我得到的：

在此输入图像描述

你对我做错了什么有什么想法吗？这是我的代码：

  <Paper variant="outlined" className={classes.paper}>
    <Grid
      container
      spacing={2}
      className={classes.grid}
      alignItems="center"
      justify="center"
    >
      ...
      <Box display="flex" alignItems="center" className={classes.box}>
        <Grid item xs="auto" className={classes.arrow}>
          ...Left Arrow...
        </Grid>
        <Grid item>
          <Grid
            container
            spacing={2}
            className={classes.grid}
            alignItems="center"
            justify="center"
          >
            <Grid item xs="auto">
              <UserCard content={users[index]} />
            </Grid>
            <Hidden xsDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 1]} />
              </Grid>
            </Hidden>
            <Hidden smDown>
              <Grid item xs="auto">
                <UserCard content={users[index + 2]} />
              </Grid>
            </Hidden>
          </Grid>
        </Grid>
        <Grid item xs="auto" className={classes.arrow}>
          ...Right Arrow...
        </Grid> …
Run Code Online (Sandbox Code Playgroud)

flexbox reactjs css-grid material-ui react-flexbox-grid

Zab*_*uki
2021 02-25
5
推荐指数
1
解决办法
8047
查看次数

将自动扩展“concertina”CSS 网格行行为复制为列

Michelle Barker 写了 \xe2\x80\x9cSolving a Tricky Layout Problem with CSS Grid\xe2\x80\x9d。她的代码在垂直方向上工作得很好，但我\xe2\x80\x99m很难在水平方向上适应它。

\n

随着视口变窄（或者当您添加更多文本或增加等），顶部/底部版本成功地缩放其文本\xe2\x80\x99s 网格行font-size。但是当调整视口、文本或font-size左/右版本\xe2\x80\xa6时，我\xe2\x80\x99m不知道如何描述发生的情况：

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n
视口顶部对齐底部对齐右对齐尝试左对齐尝试
宽的在此输入图像描述在此输入图像描述在此输入图像描述文本位于媒体的左下角，x 轴重叠较多
狭窄的在此输入图像描述窄视口中的底部对齐文本我尝试在狭窄的视口中右对齐文本在此输入图像描述
\n
\n

\r\n
\r\n
* {\n  box-sizing: border-box;\n}\n\n.grid {\n  border: 2px dashed;\n  margin: 40px 0;\n}\n\n.grid__media {\n  background: darkgray;\n  font: 2em monospace;\n  alignment-baseline: middle;\n  text-anchor: middle;\n}\n\n.grid__text {\n  background: rgba(95, 158, 160, 0.7);\n}\n\n:root {\n  --static-areas: repeat(8, minmax(0, 1fr));\n  --autoexpanding-areas: [text-start] 1fr [media-start] auto [text-end] 40px [heading-start] auto [heading-end] 40px auto …
Run Code Online (Sandbox Code Playgroud)

css translation accessibility css-grid

Tig*_*igt
2023 05-21
5
推荐指数
0
解决办法
187
查看次数

flex-wrap 导致儿童身高增加一倍

正如标题所示，当在父 div 上启用 flex-wrap:wrap 时，子网格容器的高度会加倍。我希望它不要这样做，但更重要的是，为什么会发生这种情况？

我假设如果/当添加更多网格项以使其包裹时，网格的高度将简单地调整......但我显然错过了一些东西。

我希望它看起来像flex-wrap:nowrap启用时一样，但我也希望它能够换行......

在 Codepen 上查看

.container {
  width: 88%;
  margin: 2rem auto;
  max-width: 1400px;
}

.cno-event-search-filters__container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cno-event-search-filters__filter-container {
  border: 2px solid black;
  display: grid;
  grid-template-columns: repeat(auto-fit, max(240px));
  gap: 1rem;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="cno-event-search-filters">
    <div class="cno-event-search-filters__container">
      <h4 class="cno-event-search-filters__title">Event Types</h4>
      <div class="cno-event-search-filters__filter-container">
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Culture">
          <label for="Culture">Culture</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Entertainment">
          <label for="Entertainment">Entertainment</label>
        </div>
        <div class="cno-event-search-filters__filter">
          <input type="checkbox" id="Sports">
          <label for="Sports">Sports</label>
        </div> …
Run Code Online (Sandbox Code Playgroud)

css flexbox css-grid

KJ *_*lke
2023 05-14
5
推荐指数
1
解决办法
101
查看次数

CSS 网格模板区域无法与 Flex 子项正常工作

display:flex我在其中一个元素内部使用时遇到问题grid-template-area。grid-template-columns特别是，我很难理解为什么我在使用vs时看到的行为不同grid-template-area。

这是我的示例，第一个框是使用创建的grid-template-columns，第二个框是使用grid-template-area. 蓝色部分是一个flex元素：

在此输入图像描述

1号用途：

grid-template-columns: 2fr 5fr;

2号用途：

grid-template-areas: 
    "stage-left2 stage-left2 stage-right2 stage-right2 stage-right2 stage-right2 stage-right2";
Run Code Online (Sandbox Code Playgroud)

既然它们都是 2:5 的比例，那么它们不应该相等吗？

还有一个问题，为什么在第二个示例中黄色区域缩小而不是像第一个示例中那样保持大小等于 2/7？这似乎与蓝色区域是弹性元素有关。当从那里删除 flex 属性时，黄色区域将恢复到正确的大小。

grid-template-areas: 
    "stage-left2 stage-left2 stage-right2 stage-right2 stage-right2 stage-right2 stage-right2";
Run Code Online (Sandbox Code Playgroud) 
#plan-container{
max-width: 500px;
}

.stage {
    display: grid;
     grid-template-columns: 2fr 5fr;
    border-bottom: 3px solid grey;
    padding-bottom: 10px;
    margin-bottom: 10px;

    
}

.stage-left {
    background-color: yellow;
  display: grid;
  grid-template-rows: 4fr 2fr;
  text-align: center;
  
}

.stage-right {
    background-color: aqua;
    display: flex; …
Run Code Online (Sandbox Code Playgroud)

html css flexbox css-grid

Xnn*_*n04
lucky-day
5
推荐指数
1
解决办法
144
查看次数

标签 统计

css-grid ×10

css ×9

flexbox ×4

html ×4

css3 ×3

accessibility ×1

alignment ×1

css-selectors ×1

material-ui ×1

pseudo-element ×1

react-flexbox-grid ×1

reactjs ×1

translation ×1

vue.js ×1