css display: grid属性repeat

.container {display: grid;box-shadow: 0 0 1px #cccccc;grid-template-columns: repeat(3,1fr);   /*相当于 1fr 1fr 1fr*/grid-template-rows: repeat(2,100px);    /*相当于100px 100px*/row-gap: 5px;column-gap: 5px;
}
.item {box-shadow: 0 0 5px #CCCCCC;padding:10px;
}

<div class="container"><div class="item item1">A</div><div class="item item2">B</div><div class="item item3">C</div><div class="item item4">D</div><div class="item item5">E</div><div class="item item6">F</div>
</div>

css display: grid属性repeat相关推荐

css display: grid属性grid-template-areas
<style> .container {border:none;display: grid;height: 600px;grid-template-columns: 200px 1fr; ...
html block属性,css display block属性的意思、作用和效果
css中display的block属性是什么意思呢?他是指拥有该属性的html元素以块的方式显示,同时,该元素的前面和后面都会换行,也就是说,如果给一个元素B设置的display:block,那么该元 ...
三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block
文章目录三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block Block Inline Inline-block Block,Inline,Inline-B ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...
CSS display的属性
可能的值值描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...
CSS display overflow 属性 cursor光标类型
display属性功能:规则网页元素如何显示的问题. 取值:none(隐藏).block(以块元素显示).inline(以行内元素显示) block:可以实现将行内元素转成块元素. ...
详解CSS——display各个属性值（带例子）
文章目录 display属性的支持情况 display属性的作用 display属性值默认值 inline none block inline-block list-item run-in tabl ...
css display：grid布局
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...

css display: grid属性repeat

css display: grid属性repeat相关推荐

最新文章

热门文章