所以我有这个网格:
+---------+------------------------------+---------+
| <div> | <p> - 1000 characters long | <div> |
+---------+------------------------------+---------+
里面p有超长的字符串,没有空格.divs是具有固定尺寸的占位符.这产生了以上:
display: grid;
grid-auto-flow: column;
grid-template-columns: auto minmax(0, 1fr) auto;
但minmax(0, 1fr)改为1fr给出这个:
+---------+----------------------------------------+
| <div> | <p> - 1000 characters long | <div> |
+---------+----------------------------------------+
它从其父级溢出并超出屏幕大小.为什么它不像minmax？
我正在玩CSS网格布局,并遇到了一个我无法找到答案的问题.
请考虑以下示例:
:root {
--grid-columns: 12;
--column-gap: 10px;
--row-gap: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), calc(100% / var(--grid-columns)));
grid-column-gap: var(--column-gap);
grid-row-gap: var(--row-gap);
justify-content: center;
}
[class*=l-] {
border: 1px solid red;
}
.l-1 {
grid-column-start: span 1;
}
.l-2 {
grid-column-start: span 2;
}
.l-3 {
grid-column-start: span 3;
}
.l-4 {
grid-column-start: span 4;
}
.l-5 {
grid-column-start: span 5;
}
.l-6 {
grid-column-start: span 6;
}
.l-7 {
grid-column-start: span 7;
}
.l-8 {
grid-column-start: span …我刚刚测试了CSS display: grid.它运行良好,但grid-column-gap: 10px;打破了父容器.我下面代码中的绿色区域小于网格区域.
box-sizing: border-box; 显然没有效果.
如何使网格区域和父容器具有相等的宽度？
/* ------------------------------- Resets --------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, …