相关疑难解决方法(0)

我正在创建一个包含必填字段的表单.为了按要求标记这些,我将一个星号(*)作为一个::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/

我想使用 div 和 css-grid 编写 2048 游戏。这就是我想象的输出：

我有适合浏览器窗口的外部部分，我只想在中左 div （称为 ）的中间（水平和垂直）写入 4x4 网game-container格

<div class = "game-container">
  <div class = "game">
    <div class = "game-cell"></div>
    <!-- 16 game cells total -->
    <div class = "game-cell"></div>
  </div>
</div>

我使用以下方法制作了 4x4 网格：

div.game {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

但是，我有一些问题：

• 如何制作每个game-cell正方形（假设为 50px）
• 如何在a的中间显示一个数字game-cell
• 如何让div相互接触

我可以每一项都做，但不能一次全部做。

另外，如何game在div的中间显示div（如图）game-container。

附言。如果它可以简化某些事情，我不介意使用一些 Bootstrap。

有关外容器的一些信息：

html, body, div.container{
    height: 100%;
    margin: 0;
    padding: 0;
} …

我下面有一个CSS网格，我希望内容（现在是字母）在单元格内垂直对齐。做到这一点的最佳方法是什么？vertical-align:middle在单元格上似乎什么也没做，align-items:center;在网格容器上工作了，但是高度都不同了。

body {
  margin: 40px;
}

.wrapper {
		display: grid;
    grid-gap: 10px;
		grid-template-columns: [col] 100px [col] 100px [col] 100px;
		grid-template-rows: [row] auto [row] auto [row] ;
		background-color: #fff;
		color: #444;
	}

	.box {
		background-color:#444;
		color:#fff;
		padding:20px;
		font-size:150%;
	}

	.a {
		grid-column: col / span 2;
		grid-row: row 1 / 3;
	}
	.b {
		grid-column: col 3 / span 1;
		grid-row: row ;
	}
	.c {
		grid-column: col 3 / span 1;
		grid-row: row 2 ;
	} …

我正在尝试在嵌套网格项目内创建三个项目。正如您从代码中看到的，我将“panels”div 放在“jumbo”和“content”div 之间。我还在里面嵌套了三个div。在 CSS 中，我在.panels.

我希望“面板”div 在垂直轴上分成三个大小相等的部分。想象一下三个方块依次堆叠起来。但嵌套项目不会填充整个“面板”div。如果运行代码片段，您可以看到面板是嵌套的，但不占用整个空间。他们只占父母的一小部分。我添加background-color: white !important到其中一个嵌套面板以显示它有多小。

另一个例子可以在这里看到：https://codepen.io/rachelandrew/pen/NqQPBR/

但同样，嵌套的 E、F 和 G 项不会扩展以填满整个 D 部分。

有没有办法让三个面板填充其父面板？

.container {
    display: grid;
    width: 100%;
    height: 100%;
    grid-gap: 3px;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 40px 130px 130px 130px 60px 330px 40px;
}

.header {
    grid-column: 1 / -1;
}

.jumbo {
    grid-column: 1 / -1;
    grid-row: 2 / 5;
}

.panels {
    grid-column: 3 / 9;
    grid-row: 4 / 6;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr); …

我想要一个巨大的进度栏，该进度栏在CSS网格内垂直对齐。

问题是CSS网格内的垂直对齐对我不起作用。我在Firefox和Chrome上都尝试过。

我试过了vertical-align: middle，但是没有用。我已经在网格项目中放置了一个Flexbox，但是仍然无法正常工作。

这是我的最小示例：

.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}

.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

.three {
  border-style: solid;
  border-color: violet;
  grid-column: 1;
  grid-row: 4 / 5;
}

.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 2;
  grid-row: …

我在CSS网格中有两列布局，想切换到1024px的单列布局。

.page {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  grid-column-gap: 5pt;
  grid-row-gap: 5pt;
}

@media (max-width: 1024px){
  .page{
    display: block;
  }
}

更改显示类型是禁用grid-template-rows等的完整解决方案，还是应该明确重置？

使用网格设置显示类型时，是否有任何“陷阱”？

我想用 CSS Grid 做两件看起来不兼容的事情：

1. align-items: center; 我希望每个单元格的内容以每个单元格的垂直轴为中心。

2. 用颜色填充单元格的整个可用区域。当我应用该属性align-items: center;并且没有用颜色填充整个区域时，内容会沿垂直轴被挤压。

我究竟做错了什么？我如何达到我想要的结果？CODEPEN DEMO

.grid {
  align-items: center;
  /* remove align-items property to see content fill entire cell area */

期望的行为

我想用颜色填充每个单元格的全部内容。

实际行为

内容沿垂直轴被挤压，不会用颜色填充单元格。

演示

这是 Codepen 中的演示。

代码

https://codepen.io/anon/pen/NaLoLZ?editors=1100

<div class="grid">
<div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>
<div class="item4">item 4</div>
<div class="item5">item 5</div>
<div class="item6">item 6</div>
<div class="item7">item 7</div>
<div class="item8">item 8</div>
<div class="item9">item 9</div>
<div class="item10">item 10</div>
<div class="item11">item 11</div>
<div class="item12">item 12</div>
<div …

使用弹性容器和flex-wrap: wrap设置,您可以使用溢出的项目与中心对齐justify-content: center.

有没有办法使用CSS网格实现相同的行为溢出网格项？

我创建了一支显示所需弹性行为的笔

.container-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container-flex .item {
  width: 33.33%;
  background: green;
  border: 1px solid;
}

.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container-grid .item {
  background: red;
  border: 1px solid;
}

* {
  box-sizing: border-box;
}

<h3>Flex</h3>
<div class="container-flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<h3>Grid</h3>
<div class="container-grid">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div> …

我正在努力获得以 Tailwind 为中心的网格布局。这是一个例子

    <div class="grid grid-cols-6 p-24 justify-center bg-slate-500">
        <div class="w-full p-8 col-span-2 justify-center justify-self-center mx-auto bg-slate-900 text-white text-center text-lg">
            2 cols, should be centered
        </div>
    </div>

看起来是这样的：

当然，我可以添加 col-start-2 然后它会居中，但是网格来自动态布局，我不知道是否有更多元素出现在同一行上。我尝试过 justify-center、justify-self-center、mx-auto，也尝试过 no-float，但没有任何效果。

有人有什么想法吗？

I have a grid with 3 rows, 1 column and item of the middle row is a grid itself of 2 columns and 4 rows.

CSS Snippet

.css-grid-container-common-styles{
    height:100vh; /*???*/
    display: grid;
    grid-template-columns: 1fr;  /* 1column*/
    grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaininign is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

HTML Snippet

<div class="css-grid-container-common-styles"> <!-- first container -->
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div-common-styles"> <!-- …