css-grid

    1热度

    1回答

    我试图让我的标题是4种不同颜色下的一条线。 对于桌面我想它去与我的响应格: 对于移动我想让它去的全宽:现在 <header> <div class="container"> <div class=" row"> <div class="col-3 center"> <img src="assets/arteveldelogo.png"> </div

    -2热度

    1回答

    我有以下网格布局: * * * * *********** *********** * Area1 * * Area2 * *********** *********** * * * * 两个区域1和区域2的div元素。我想添加横跨Area1和Area2的背景渐变。这可能吗? 我可以用另一个跨越Area1和Area2的元素包围它们,但是我不能把子元素放在这个网格布局中。 我正在

    0热度

    2回答

    我想要应用每个网格元素之间不同的差距,例如我们有以下代码。 4个网格线,3个元素和每个网格框之间10px的宽度。我如何在每个网格框之间应用自定义宽度?例如元素1和元素2之间为20px,然后元素2和元素3之间为30px? 我可以实现与CSS网格? 编辑:没有使用填充。 编辑2:提供Pictre。 Click for picture preview html, body {height: 100%;

    -1热度

    3回答

    我有4列CSS网格布局中的div元素列表。 div元素设置为100%宽度,填充顶部为100%,以保持1:1的宽高比。这是一种常见的技术,如下所示:https://stackoverflow.com/a/6615994/7949834 这适用于Firefox,但不适用于Chrome。在Chrome中,元素不占用网格容器内的任何空间。这是什么原因? ul { border: 2px so

    1热度

    1回答

    我刚刚在Chrome中使用CSS Grids系统制作了this site。这一切看起来完全如何我想它然后我添加一个在线工具/发电机的前缀。 https://autoprefixer.github.io/ 和 http://pleeease.io/play/ 如果我仰望CSS Grids on 'CanIuse“它显示了它应该在所有的浏览器。 到目前为止,它适用于Safari,Chrome,Andr

    0热度

    1回答

    我有一个webapp的CSS网格布局,具有固定大小的页眉和页脚(用rem单位定义)和可扩展的中心行(定义为1fr ),其中包含两个侧边栏和一个中央内容区域。外栅格容器被定义为宽度和高度以填充视口(100vw/vh)。我希望中心行占用页眉和页脚之间的所有空间,并且要让任何溢出滚动,而不是扩大页面的高度。 我试过各种可能的解决方案,包括使用overflow-y:scroll,但似乎没有任何工作。额外的

    1热度

    3回答

    我想弄清楚如何让我的网格的两列高度相同。这是我所追求的: xxxxxxxxxxxxxxxxx   xxxxxxxxxxxxxxxxxxx x qqqqqqqqqqqqq x   x qqqqqqqqqqqqqqq x x qqqqqqqqqqqqq x   x qqqqqqqqqqqqqqq x x x   x qqqqqqqqqqqqqqq x x x   x q

    2热度

    1回答

    是否可以创建定义某些区域(如页眉和页脚)的grid-template-area,同时允许在它们之间创建未知数量的行? 我会有用户生成的内容,所以我不知道有多少行要排列。我想确保第一个和最后一个是页眉和页脚。 幻想例如: #grid { display: grid; } .big { grid-template-columns: repeat(3 1fr); gr

    1热度

    1回答

    IE 11中Css Grid中的项目相互叠加。一切都在Chrome,FF和Safari浏览器工作正常,但不是IE 11 铬: IE: 代码: .content-item__image { height: 210px; width: 100%; background-size: cover; background-position: cente

    2热度

    1回答

    我正在尝试制作一个网格列跨度为,每行行,包括隐式行。 我碰到this question问如何跨越所有网格行。第二个答案有一个更好的解决方案。这似乎是可行的,但我自己的例子和对第二个答案的评论表明它不起作用。 W3 spec也给出了一个非常接近的例子。 我的代码有问题吗?或者这可能是Firefox,Chrome,和 Safari中的错误? I also have this example in a