html - CSS网格不限制列数-6ren

html - CSS网格不限制列数

转载作者：行者123 更新时间：2023-12-02 16:29:07

25

4

我试图让我的网格每行只放置 3 个按钮，这样当我添加第 4 个按钮时，它应该自动放置在下一行。

这是我的代码:

.div {
  display: grid;
  grid-template-columns: auto auto auto;
  background: #3c763d;
}

.button {
  background: #27ae60;
  float: left;
  margin: 6px 6px 6px 6px;
  height: 2rem;
  width: 8.33%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.34);
  color: #f9f9f9;
  text-align: center;
  justify-content: center;
  padding-top: 12px;
}

.button:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <title>Rock, Paper, Scissors!</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" type="text/css" href="index.css">
</head>

<h1>Rock Paper Scissors</h1>
<h3>Make your selection!</h3>

<div>
  <div class="button">Rock</div>
  <div class="button">Paper</div>
  <div class="button">Scissors</div>
  <div class="button">Clear</div>
</div>

</html>

相反，我一直向左显示一排 4 个按钮，而不是一行 3 个，然后是新的一行 1。我在这里误解了什么？

最佳答案

您已经很接近了，但是您需要解决一些问题才能使其正常工作。

<强>1。您的网格 CSS 规则位于您未使用的类 div 中:
您的网格 CSS 规则在 .div {...} 中要么你的意思是成为<div>元素(仅供引用 - 它会使每个 div 成为网格容器!)或忘记将 div 类添加到 HTML 中的网格元素。

相反，向您的外部 div 添加一个类，例如<div class="mygrid">并将网格 css 规则添加到该类，例如

.mygrid {
    display: grid;
    grid-template-columns: auto auto auto;
    background: #3c763d;
    /* Extra info! You can use this for even grid gaps */
    grid-gap: 6px;
    padding: 6px;
}

<强>2。你给你的按钮 width 8.33% - 这将使您的按钮占网格列的 8.55%，我假设您不想要 :)。

<强>3。您还可以删除 display:float 来自按钮，因为这将由网格自动管理

<强>4。您可以使用 grid-gap在网格元素之间创建均匀的间隙，而不是在它们上设置边距 - 这使得行和列之间的间隙相同，因为我没有边距折叠。
(可以在容器上使用相同大小的padding来均匀填充空间。)

工作示例:

.mygrid {
    display: grid;
    grid-template-columns: auto auto auto;
    background: #3c763d;
    grid-gap: 6px;
    padding: 6px;
}

.button {
    background: #27ae60;
    height: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.34);
    color: #f9f9f9;
    text-align: center;
    justify-content: center;
    padding-top: 12px;
}

.button:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}

<h1>Rock Paper Scissors</h1>
<h3>Make your selection!</h3>

<div class="mygrid">
    <div class="button">Rock</div>
    <div class="button">Paper</div>
    <div class="button">Scissors</div>
    <div class="button">Clear</div>
</div>

关于html - CSS网格不限制列数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63823032/

25

4

0

文章推荐： javascript - 如何将表的列名存储在 Snowflake 的数组中

文章推荐： javascript - jison 规则优先不起作用？

文章推荐： javascript - 递归启用/禁用 div 中按钮的方法？

文章推荐： Python多进程运行多次

sql - 列数
您如何计算Oracle表中的列数？最佳答案 SELECT count(*) FROM user_tab_columns WHERE table_name = 'FOO' 应该给你foo中的列数。您可
image - CSS3 列数
我有一个宽度为 100% 的 div，里面有大约 10 张图片，所有图片的宽度和大小都不同。我希望能够无缝地将这些图像彼此 float ，我已经做到了，但它们不会在屏幕上拉伸(stretch)，它们都
javascript - 表格应该改变行数/列数？
请看下面的代码，表格应该根据下面selected id选项中选择的输入更改行数，但只读取select id的第一个值，行数不会根据选择，你能指出我代码中的错误吗？ http://jsfiddle.ne
android - 减少android中gridlayout的行/列数
我需要一个可以在 3×3 和 4×4 之间切换的动态 gridlayout。我可以 setRowCount 和 setColumnCount 从 3 到4 但不是从 4 到 3。它会显示以下问题: C
不遵守 CSS 列数
这里有一个没有真正答案的类似问题:CSS columns bug — 5 column count only showing 4 (with images) 我正在使用 column-count 来显
excel - 在标题中查找匹配并偏移到 X 列数
我正在尝试找到一种方法来填充摊销时间表，如下所示。我目前使用的公式是: =IF($B2=$1:$1,$A2/$C2," ") 但是，这仅填充了第一个点(“起点”)，我想做的是根据摊销期抵消这一点。期
python - OpenCV:像素数与行数*列数
我运行以下代码: import cv2 import numpy as np img_file='pokemon.jpg' img=cv2.imread(img_file) # print tota
Asp.net GridView 列数
我正在使用 asp.net 和 vb。这里我将数据绑定(bind)到Gridview。该数据集有 5 条记录，3 列，并且 gridview 显示 5 条记录，3 列。但 Gridview.colum
mysql - 列数、整数值、数据被截断和其他一些消息
我已经为我的数据库苦苦挣扎了一段时间，几乎不可能找到我的老师。我的代码如下: INSERT INTO `database28`.`activity` VALUES ("Stefan", 1.1.2.2
python - MySQL插入一个条目，其中值的数量<列数
我有一个执行 SQL 命令的 python 脚本，并尝试将所有数据插入表中。问题是我有一个条目列表，例如: "Bob", "bob@gmail.com" "John", "john@gmail.com
css - 基于父列的 Bootstrap 列数
有谁知道这是否可以通过 bootstrap mixins 来完成。列(父级数) 像什么Neat有。在 Neat the Columns 中，mixins 的工作方式如下 @mixin span-c
html - 列数 css 和列分离
我有这样的网址:http://xn----7sbabhi8cwaajmue5o.xn--p1ai/cars/search/by_man_and_model?by_manufacturer=115 你可
html - 固定列宽，列数/行数取决于屏幕宽度
使用 Bootstrap 3，我正在寻找一种网格布局，其中列宽在任何屏幕分辨率下都是固定的(比如 200 像素)，但它们的数量取决于屏幕宽度。换句话说，我知道列的宽度，但我不知道每行有多少列，因为这
java - 我需要显示每列的最小值，编号不均匀。列数
public class SmallestColumn2{ public static void main(String[] args){ int [][] smallest
css - 更改网格系统中的 Bootstrap 列数
如果我只有 9 列，但我想将它们分散到 100% 的 div。如何做到这一点？ NSW VIC QLD WA SA TAS ACT N
html - CSS 列数 - 更改顺序
我想在这里更改列的顺序: #container { position: relative; width: 600px; } #column-wrapper { -webkit-
python DataFrame获取行数、列数、索引及第几行第几列的值方法
1、df=DataFrame([{‘A':'11','B':'12'},{‘A':'111','B':'121'},{‘A':'1111','B':'1211'}])
sql - 使用SQL Loader导入csv文件到表中[但是大号。列数]
我想将csv文件形式的数据导入表中。[使用Oracle SQL Developer]。我有数百个文件，每个文件有大约50列。从SQL * Loader Wiki（http://www.orafaq.
qt - 如何根据布局大小更新 QGridLayout 行/列数？
好吧，这对我来说似乎很基础，尽管我找不到任何关于如何实现它的信息。假设我有某种 QGridLayout 包含相同大小的小部件。现在我想根据布局大小更新其行数/列数。因此，例如在相对较宽的屏幕上它看
hadoop - Hive 对行数、列数、文件大小是否有理论和实际限制？
我在 https://cwiki.apache.org/confluence/display/Hive/Home 中找不到任何记录在案的限制。我的猜测是行数或列数没有限制。文件大小受文件系统限制。通

首页

博学

6Ren·AI

商城

html - CSS网格不限制列数