在CSS网格中,对于一个大的网格区域,如何评估一行的最大内容和最小内容?
根据MDN文档( https://developer.mozilla.org/en-us/docs/web/css/grid-template-rows-rows ): 最小 是一个关键字,代表占据网格轨迹的网格项目最小内容的贡献. 所以,在此示例中: 在 .grid { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: max-content max-content max-content min-content; grid-template-areas: "one aside" "two aside" "three aside" "four aside" } .one { background: red; grid-area: one; } .two { background:
6 2024-04-03
编程技术问答社区
Css-grid: 将背景渗入容器外
考虑在容器上具有最大宽度约束的以下3列网格布局: 在 .container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 56px minmax(56px, auto) 56px; max-width: 300px; margin: auto; } header { background-color: grey; grid-column: 1 / span 3; grid-row: 1 / 2; } main { background-color: #2E64FE; grid-column: 1 / span 2; grid-row: 2 / 3; } aside { background-color: #FF0040; grid-column: 3 / span 1; gr
6 2024-03-27
编程技术问答社区
用高度(而不是宽度)对方框进行平方,以创造相等的宽度(长宽比)。
我知道:before { padding-bottom }的平方溶液.这仅具有宽度值,因为填充始终使用与父母宽度的关系. - 但这是我的问题. i仅具有固定高度(由父容器)的值,我需要按照该高度值的平方盒.我不喜欢使用JS.如果有一个解决方案替换 静态宽度用纯CSS进行值,请告诉我! 这是一个简单的代码样本: 在 div.wrapper { height: 70px; padding: 5px; background: black; } div.box { float: left; width: calc(70px - 10px); /* here is that static value for width, but better would be a relation to (parent) height */ height: calc(100% - 10px); margin: 5px; } div.b
20 2024-03-16
编程技术问答社区
为什么我与ASCII艺术的网格板序列不起作用?
grid-template-areas: "....... header header" "sidebar content content"; 更改为: grid-template-areas: "....... header header" "sidebar header content"; 一切都崩溃了. 如何使用CSS网格布局达到相同的效果? 在 body { margin: 40px; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .header { grid-area: header; } .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px; grid
20 2024-03-07
编程技术问答社区
我可以为CSS网格布局组件制作动画吗?
是否有一种方法可以使更改的组件中更改的组件顺序进行动画,该组件用CSS网格布局显示? 这是一个简短的 bereRplate 解决方案 no. 根据 css grid布局模块级别1规范 有5个动画网格属性: grid-gap, grid-row-gap, grid-column-gap 长度,百分比或计算 grid-template-columns, grid-template-rows 作为一个简单的长度,百分比或计算列表,只要唯一的区别是列表中的长度,百分比或CAC的值. source 其他解决方案 如果您只希望用户看到文本的更改,则可以让JavaScript替换每个Div的文本.在这种情况下,DIVS将是相同的(例如Div-1,Div-2,Div-3).您只会更改文字. 如果要更改完整的DIV +内容(在HTML中)及其CSS属性要更改的位置,则您必须将JavaScript扩展到具有3个值并随机将它们放入顺序的函数(例如(例如)(例
10 2024-02-26
编程技术问答社区
为平滑的css网格-列变化制作动画
我正在使用CSS网格布局将各个部分放置在网站上.我使用grid-column: x / x;和grid-row x / x;在页面上设置其位置和大小.它的运作非常好. 现在,我试图在两个网格列修复程序之间进行平滑的过渡,这在屏幕尺寸变化时会发生.更改是从grid-column: 3 / 9;到grid-column: 2 / 10;,这意味着DIV在任一侧生长1fr.目前,它只是" ping"到位,但我想在两者之间进行平稳的过渡. 有人有任何想法如何解决吗? 这是我的CSS文件的摘要: nav { background-color: $company-blue; border : 3px solid $company-yellow; opacity : 0.8; grid-column : 3 / 9; grid-row : 3 / 4; ... @me
22 2024-02-26
编程技术问答社区
Chrome 80中的grid-template-columns的计算方式不一致
我有一个带有四个形式的页面.每个表单的布局使用以下CSS网格配置定义,该配置在所有表单之间共享: .base-grid-wrapper { display: grid; grid-template-columns: repeat(12, 1fr); grid-row-gap: 1em; grid-column-gap: 1em; width: 75%; } 自Chrome 80发布以来,这些形式中的第一种形式的样式已被(有点)破碎. grid-template-columns的计算值是不均匀的,但仅用于四种形式中的第一.对于以下三种形式(使用相同的基本电网定义),网格的列是均匀尺寸的,这是我期望使用repeat(12, 1fr)的三种形式.在Chrome 80之前,情况并非如此:所有形式的网格都有均匀尺寸的列. 在其他浏览器(Safari和Firefox)中,这些列按预期呈现. Chrome 80中是否会改变某些东西?搜索Chrom
14 2024-02-25
编程技术问答社区
如何让Angular'的<router-outlet>与CSS Grid协同工作
我正在尝试使用Angular 7和CSS网格创建一个布局.我的问题是router-outlet仅在第二行中占用一列. 我已经创建了一个 stackblitz在这里. 您可以在app.component.css中看到的,我想要router-outlet(及其任何内容)占用grid-column: 2 / 5,到目前为止,它占用2/3. 我想实现的目标? 解决方案 没有大小,没有任何内容,实际路由器内容是下一个元素.从中删除样式,仅将其应用于下一个元素,您应该可以. 另外,您的app.component试图将样式应用于组件中未包含的组件.您必须在组件定义中使用ViewEncapsulation.None明确指定此功能.请参阅此处: https://stackblitz.com/edit/edit/angular-lmpnkl 其他解决方案 我认为问题是您正在尝试将样式直接应用于
20 2024-02-22
编程技术问答社区
嵌套CSS网格的做法不好吗?
我正在尝试使用组件驱动的前端框架,例如Angular,最后学习CSS网格. 我的问题是: nest CSS Grids是不好的做法吗? 我在这里所做的是在我的主要/根组件中,我使用CSS网格来制作两件事:Navbar和主要内容区域,因为Navbar将存在于整个应用程序中,也将存在于主要内容中. 如下所示,在根级别上的网格,然后在组件中的另一个网格.在主要内容区域中,我使用的每个角部分都会有更多的网格,可能是一个网格. ********************** ****************************** * Navbar * => * img | nav | logout * ********************** ****************************** ********************** * * *
48 2024-02-20
编程技术问答社区
Css网格。在2行中对准不同数量的项目
我必须将7 div s(图像)放入两行,第1行,第2行4.顶部3 div应该以中心为中心,底部4可以占据所有空间. 这是我所做的: 在 .content { display: grid; grid-gap: 10px; grid-template-columns: 1fr repeat(3, 170px) 1fr; grid-template-areas: ". item1 item2 item3 ." "item4 item5 item6 item7"; grid-template-rows: 1fr 1fr; } .content .box { width: 170px; height: 170px; border: solid 1px #000; } .content.box:nth-child(1) { grid-area: box1; }
14 2024-01-24
编程技术问答社区
表格对齐方式折叠成单行
我将父元素设置为newTableForm,带有labelColumn和mainFormColumn作为孩子 - 但是当前的CSS一切都崩溃了: 在 .newTableForm { display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: 30px 30px 30px 40px; grid-gap: 10px; grid-template-areas: "... main" "labels main" "labels main" "... main"; border: 2px dashed deeppink; } .labelColumn { grid-area: labels; } .mainFormColumn { grid-area: main; }
12 2024-01-24
编程技术问答社区
为什么我的模板区域没有按照我的预期进行堆叠?
使用以下CSS: .container { display : grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: 'first second' 'first second' ; } .first { grid-area: first; width: 200px; height: 200px; background-color: red; } .second { grid-area: second; width: 200px; height: 200px; background-color: #0eb5d6; 这些盒子将堆叠(以一个红色,1个蓝色显示):
18 2024-01-24
编程技术问答社区
为什么当我把鼠标悬停在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"]:
10 2024-01-24
编程技术问答社区
css-grid创建一个假想列
我正在创建一个简单的表单,我想拥有这种布局 到目前为止,非常好,非常简单的2列,带有一个嵌套的2列,所有这些列都用0.5FR定义,如果我正确理解的话,应该是"自由空间"的一半. ,但是,如果我尝试减少屏幕,则会发生这种情况.即使我没有媒体查询. 如果您使用Chrome DevTool进行调试,则可以看到它正在从无任何元素中创建第三列.有什么想法吗? h1, h2 { font-family: Lato; } .form{ border: 1px solid black; text-align: center; display: grid; grid-template-rows: 1fr; grid-gap: 1em; } .two-field{ display: grid; grid-template-columns: 0.25fr 0.75fr; } /*****************
20 2024-01-24
编程技术问答社区
在CSS Flex/Grid中使用`baseline'值与`justify-content'、`justify-items'或`justify-self'是否有意义?
mdn 解决方案 MDN在这里不准确,因为justify-content> 没有基线 如果您检查Value: flex-start | flex-end | center | space-between | space-around 在不久的将来,按照Value: normal | | ? [ | left | right ] = space-between | space-around | space-evenly | stretch = unsafe | safe = center | start | end | flex-start | flex-end 顺便说一句,在新的特定中有baseline for baseline
14 2024-01-24
编程技术问答社区
网格项目的等高子女
with 本质上,我想要看起来像这样的东西: 在每一行中,细胞与相邻的细胞具有相等的高度.但是,每行都是彼此独立的.第一行中的header s高2行,但第二行中的header s高3行. 每个元素中的内容尚不清楚,项目数量也未知.因此,对准必须能够动态应用,而不是硬编码任何特定单元的高度. 如果我正确理解它,则网格项目中的元素本身不是网格项目.是否可以像对齐一样对齐? display: contents开始得到浏览器的支持,我认为将其与grid-template-area s 结合在一起会起作用,因为在这种情况下,网格项目的数量是动态的. 在 main { display: grid; grid-template-columns: 200px 200px 200px; grid-gap: 20px 20px; } header { background-color: lightblue } .content { backgrou
16 2024-01-24
编程技术问答社区
如何使用JavaScript获取元素的网格坐标?
假设我有一个3列CSS网格.使用JavaScript,有没有办法获得自动位置元素的grid-row和grid-column? 示例: console.log($('#test').css('grid-row'), $('#test').css('grid-column')); // expected output: 2 3 // actual output: two empty strings .grid { display: grid; grid-template-columns: repeat( 3, 1fr); } 这是示例的js
26 2024-01-12
编程技术问答社区
用鼠标动态调整css网格布局中的栏目大小
我试图通过用鼠标拖动列分隔符(或调整占位符)来动态调整CSS网格布局框. i在nav元素上设置resize: horizontal;要调整大小,并且当我将小调整大小的手柄拖动在元素的右下角时进行调整,但是相邻列的宽度未自动调整,这是自动调整的重叠.这是一个损坏的 codepen . html : #1 #2 #3 css : main { display: grid; border: 3px dotted red; grid-gap: 3px; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr; height: 100%; } nav { grid-column: 1; grid-row:
22 2024-01-11
编程技术问答社区
在视觉上将一个元素放在另一个元素之后,尽管在DOM中它是先出现的,使用网格或Flexbox?
我是一名可访问性专家,我的CSS变得非常生锈,但是我需要快速提供一个以视觉上置于另一个元素的示例,尽管在DOM中是相反的. 在以下代码中,元素应在视觉上出现 的标题,但出于可访问性,在DOM中放置在此之后. Wahlresultate bekannt gegeben Dienstag, 18.8.2020 Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht. 在早期,我们需要使用黑客绝对定位来实现类似的目标.我今天应该用什么? flexbox?网格?以及如何完成? 非常感谢. 解决方案 您可以通过在每种情况下都要谨慎使用此操作,在视觉上与DOM顺序的顺序不同是nono的可访问性(尽管在这种情况下,似乎很好
24 2024-01-09
编程技术问答社区