标签: css-grid
使CSS网格自动填充仅2列
我正在使用CSS Grid并在此处找到的codepen中进行了以下布局:https://codepen.io/alexg2195/pen/xLEeMd
我的问题是,在使用时,repeat(auto-fill, minmax(400px, 1fr));我最终得到的布局不仅仅是两列.
有没有办法强制两列,但仍然有相同的最小自动填充调整大小行为？
body {
margin: 40px;
}
.layout {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 100px;
grid-template-areas: "main btn" "main .";
}
.btn {
grid-area: btn;
background-color: #444;
color: #ddd;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.boxes {
grid-area: main;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}<div class="layout">
<div class="boxes">
<div class="box a">A</div>
<div class="box …推荐指数
解决办法
查看次数
Safari上的CSS网格和绝对位置
我对CSS网格布局有疑问。
网格容器的位置绝对正确，并且grid-template-rows包含1fr，以允许一行占用所有可用空间。
这会在所有当前的浏览器上正确显示，但与macOS 10.13.2一起安装的最新Safari除外
如果未明确设置高度，则似乎是由于未计算自由空间而引起的。
我是否缺少某些东西或有解决方法？
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: grid;
grid-template-rows: 1fr 150px;
grid-template-columns: 1fr 150px;
grid-template-areas: "a b" "c d";
}
.wrapper>div {
outline: solid 1px #aaa;
padding: 10px;
}
.game {
grid-area: a;
}
.player {
grid-area: b;
}
.rules {
grid-area: d;
}
.controls {
grid-area: c;
}<div class="wrapper">
<div class="game">game</div>
<div class="player">player</div>
<div class="rules">rules</div> …推荐指数
解决办法
查看次数
如何指定repeat()将使用自动适合/填充创建的最大列数？
有没有办法在不使用媒体查询的情况下限制创建的列数,并将其与自动调整/填充相结合？
例如:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
创建精彩,响应迅速的布局.但想象一下,设计最多需要3列 - 即使在广泛的浏览器中也是如此.如果空间允许,它会愉快地显示4,5个更多列.
使用媒体查询,我可以指定大屏幕获取:
grid-template-columns: 1fr 1fr 1fr;
小屏幕得到:
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
但这感觉不对.有没有办法告诉我的网格布局重复最多n次,仍然使用重复和自动适合/填充？
更新:这不是重复:如何使用CSS网格和自动填充/拟合限制较大视口中的列数？
我问如何使视口的代码也适用于较小的视口.上面提到的问题(和答案)只是我的问题的起点.
推荐指数
解决办法
查看次数
CSS 网格：网格行/列开始/结束 VS 网格区域 + 网格模板区域
我一直在阅读CSS Tricks 上的CSS 网格教程，但一个基本方面让我有点困惑。
似乎有两种方法可以确定网格项跨越多少个单元格：
grid-template-areagrid-area使用为具有属性的网格项指定的名称- 使用
grid-column-start/end和grid-row-start/end
看看下面的测试代码，似乎 的大小grid items是按以下顺序决定的（其中左侧的值覆盖右侧的值）：
grid-row/column-start/end>>grid-template-area物品本身的尺寸
问题
- 我的上述顺序通常是正确的吗？
- 是否有指定大小
grid items（即它们跨越多少个单元格）的首选方法（上面的 1 或 2）？
代码
.container {
display: grid;
border: 1px solid green;
grid-template-columns: 120px 120px 120px;
grid-template-rows: 120px 120px 120px;
grid-template-areas: "item-1 item-1 item-2" "item-3 item-4 item-4" "item-5 item-6 .";
}
.item-1 {
border: 1px solid blue !important;
grid-area: item-1;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 1;
}
.item-2 { …推荐指数
解决办法
查看次数
如何使 CSS 网格采用其父级高度和宽度的 100%？
我有下面的代码示例。如何确保对于任何给定的行数或列数，网格将根据需要扩展项目以填充其父容器？
目的是拥有一种计算器应用程序，其中网格项目作为按钮，应占用尽可能多的空间但均匀。
以下是我带来的。正如您所看到的，有滚动，而且我不确定这是正确的方法。
body {
min-height: 100%;
}
.wrapper {
display: grid;
position: relative;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 1px;
justify-content: center;
height: 100%;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 12px;
}
.container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
}<section class="container">
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box a">A</div>
<div class="box …推荐指数
解决办法
查看次数
CSS 网格每行的不同列集
我正在尝试创建一个看起来像这样的网格，
第一行有两列，第二行有三列。它们的宽度应该相等，但我的绘画技巧不是最好的。
我试图通过在“Kort”细胞上使用类似的东西来靶向特定细胞来实现这一目标，
grid-row: 1;
grid-column: 2/4;
但我似乎无法做到这一点。任何帮助是极大的赞赏。
推荐指数
解决办法
查看次数
CSS网格呈现在Firefox和Safari中父级滚动条的后面
我有一个绝对定位的面板（固定高度，overflow scroll）和一个带有正方形瓷砖的网格（10列）。在Chrome中，网格可以正确呈现：
但是在FF / Safari中，最后一列显示在包装器的滚动条后面，这很奇怪：
我想要的是所有浏览器（例如Chrome）中的相同行为。我怎么得到这个？
:root {
--ck-character-grid-tile-size: 24px;
}
body * {
box-sizing: border-box;
}
.wrapper {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
background: red;
position: absolute;
top: 50px;
left: 50px;
outline: 1px solid black;
}
.grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
background: blue;
}
button {
background: yellow;
width: var(--ck-character-grid-tile-size);
height: var(--ck-character-grid-tile-size);
min-width: var(--ck-character-grid-tile-size);
min-height: var(--ck-character-grid-tile-size);
border: 0;
padding: 0;
overflow: hidden;
outline: 1px solid black;
}<div class="wrapper">
<div class="grid">
<button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button><button>x</button>
</div> …推荐指数
解决办法
查看次数
如何在网格项之间添加垂直线？
我目前在网格项之间添加垂直线时遇到一些麻烦。我当前的解决方案在线条之间有空白空间，并且无法使用边框，因为边框将直接“粘合”在项目上，而不是在两个项目的中间。
上面的代码目前看起来像这样：
但它应该看起来像这样：
#grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 16px;
}
.grid-item {
height: 20px;
background-color: red;
position: relative;
}
.grid-item::after {
content: "";
position: absolute;
height: 100%;
width: 2px;
background: grey;
right: -9px
}<div id="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>推荐指数
解决办法
查看次数
根据动态内容计数居中 CSS 网格项目
我有一系列从数据库中获取的图像，当添加三个或更多图像时，它会直观地显示三列。
当存在的图像少于三个时，因为我正在使用display: grid;它，所以它当前位于父容器的左侧（在代码示例中，我刚刚使用红色框来表示图像）。
无论如何，是否有这样的设置，以便当存在一两个图像时，这些图像可以对齐到父元素的中心。我很感激我可以使用 javascript 来检测存在多少图像，如果少于三个，则添加一个类并将包装器更改为display: flex，但我想知道仅使用 CSS 是否可以实现这样的布局？
由于布局的性质，当存在三个以上图像时，我确实需要使用 CSS 网格。
注意：我已注释掉 HTML 中的两个红色框，以显示仅存在一个红色框时的初始问题。
代码笔：https ://codepen.io/anna_paul/pen/xxXrVJQ
body {
display: flex;
justify-content: center;
margin: 0
width: 100%;
height: 100vh;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
max-width: 1250px;
}
.box {
width: 200px;
height: 200px;
background: red;
}<div class="wrapper">
<div class="box"></div>
<!-- <div class="box"></div>
<div class="box"></div> -->
</div>推荐指数
解决办法
查看次数
如何右对齐不完整的 CSS 网格行？
我有未知数量的项目将显示在网格中。当一行不完整时，就像屏幕截图中显示的第二行一样，我需要将项目向右对齐。
我可以使用 达到效果direction: rtl，但这会改变项目的顺序，这是我不想做的。
我怎样才能做到这一点？此处可使用 Codepen 进行故障排除：https://codepen.io/keefblurgu/pen/gOvzWbw
编辑：添加了堆栈片段
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.grid > div {
padding: 10px;
text-align: center;
background-color: coral
}<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>推荐指数
解决办法
查看次数