css-grid

    1热度

    1回答

    只要编写grid-template-columns: [first] 15% [second] 100fr [third] 15%就行,如果我们在纯CSS中执行它,但是当我在SASS中执行时,我会遇到错误。 但是,如果我检查SASS docs并搜索“网格”第一个命中是一条线,说明我应该能够使用括号......但没有示例显示应该使用的确切语法,我无法确定它出。

    1热度

    2回答

    我正在使用CSS网格布局来定位网站上的各个部分。我使用grid-column: x/x;和grid-row x/x;在页面上设置它们的位置和大小。它工作得很好。 现在我试图在屏幕尺寸发生变化时发生两个网格列修复之间的平滑过渡。这个变化是从grid-column: 3/9;到grid-column: 2/10;,这意味着div在每一边都增长了1fr。目前它只是“平息”到位,但我希望在两者之间顺利过渡

    6热度

    1回答

    我正在使用由gridbyexample.com定义的新CSS3布局技术。 除了当我尝试打印布局时,它工作得很好。 Chrome和Firefox似乎忽略了我在CSS中定义的任何分页符和横向视图模式。我为我的项目准备了一支代码笔,但它似乎改变了它在打印预览模式下的外观,因此它仅适用于查看HTML和CSS,而不是打印的外观。 https://codepen.io/JeffreySpring/pen/rz

    0热度

    2回答

    我现在用的是新的CSS格这样的: #site { display: grid; grid-template-columns: 10% 1fr 1fr 1fr 10%; grid-template-rows: 100px auto; grid-template-areas: ". header header header ." ". c

    4热度

    1回答

    当下面的代码中的祖先是display: block时,它按照预期工作。当它是display: flex嵌套网格缩小。 我想了解为什么会发生这种情况。 只需在下面的代码中取消注释display: block即可查看结果。电网停下来跨越允许的整个区域。 .ctnr{ display: flex; //display: block; flex-flow: col

    -2热度

    1回答

    所以我最近发现CSS网格变得越来越成熟,即大多数浏览器现在都支持它 - 这对我当前的项目来说很好。我不需要IE 7等,以便能够以最佳方式查看此网页。我知道你可以做一些巧妙的与媒体查询时,屏幕变得越来越小, 但我想知道是否有可能单独与CSS网格做例如? 所以我们可以说,我有一些事情是这样的: .container { display: grid; max-width: 1

    4热度

    1回答

    我创建了所需的字段的表单伪元素。为了将这些标记为必需,我将一个星号(*)作为::before元素并将其右移,使其位于该字段的右上角。 我遇到的问题是这些字段中的一部分与CSS网格一起定位,当我向网格中添加::before元素时,它被视为另一个网格项,并将所有内容都推送到新的网格行。 为什么CSS网格治疗::before元素作为另一电网项目?我怎样才能让星号像输入元素一样定位? 这里是基本的HTML

    -1热度

    1回答

    我试图找到一个支持CSS网格系统的框架。到目前为止,使用Google搜索这个主题只能给我提供基于浮动框架和Flexbox的框架。这可能是“CSS网格”这个词,它让Google很难找到我要找的东西。 任何人都找到了一个好的框架,他们可以推荐?

    -1热度

    2回答

    我无法让我的CSS电网项目走“全宽”在移动,因为我不知道有多少列将有: https://codepen.io/matthewfelgate/pen/Kvqdmp?editors=1100 * { outline: 1px dashed red; } .box { display: grid; &__heading, &__text { padding: 1em;

    1热度

    1回答

    我用CSS网格模板的地区,像这样: grid-template-areas: 'sidebar tags' 'sidebar categories'; 它工作正常,但我想补充一个空的元素,有点像这样: grid-template-areas: 'EMPTY sidebar tags EMPTY' 'EMPTY sidebar categories EM