我正在尝试使用css网格创建一个2 x 2图像平铺.我想让它变得动态,这样无论提供多少图像(1到4之间),都会使用图块的整个空间.像这样： 我有这样的工作与以下的CSS和标记. CSS
... . . 我正在尝试使用css网格创建一个2 x 2图像平铺.我想让它变得动态,这样无论提供多少图像(1到4之间),都会使用图块的整个空间.像这样：
我有这样的工作与以下的CSS和标记.
CSS
.container { display: flex;}.container .grid-tiles { margin-right: 20px;}.grid-tiles { display: grid; grid-template-columns: repeat(auto-fit,38px); grid-column-gap: 4px; grid-row-gap: 4px; width: 80px; height: 80px;}.grid-tiles .grid-tile { border-radius: 3px; background-color: red;}/* Only one */.grid-tile:only-child { grid-area: 2 span / 2 span; }/* Three */.grid-tile:first-child:nth-last-child(3) { grid-area: 2 span; } HTML
<div class="grid-tiles"> <div class="grid-tile"></div> <div class="grid-tile"></div> <div class="grid-tile"></div> <div class="grid-tile"></div> </div>
但在某些情况下,瓷砖中需要有文字.当发生这种情况时,网格不会跟随其他实例的大小：
我需要网格一致.任何人都可以提供一些帮助,以确保如何/改善网格属性？谢谢！
我现在正在工作的Codepen.
.解决方法
. 一个想法是使用一个不会在：after伪元素内崩溃的空格.这将使所有标题至少包含一个characater,即使你将它们保持为空,它们的高度也是相等的.
作为旁注,这仅适用于一行文本.如果您在一个标题中有多行文字,您将再次面临同样的问题.
.container { display: flex;}.container .grid-tiles { margin-right: 20px;}.grid-tiles { display: grid; grid-template-columns: repeat(auto-fit,38px); grid-column-gap: 4px; grid-row-gap: 4px; width: 80px; height: 80px;}.grid-tiles .grid-tile { border-radius: 3px; background-color: red;}/* Only one */.grid-tile:only-child { grid-area: 2 span / 2 span;}/* Three */.grid-tile:first-child:nth-last-child(3) { grid-area: 2 span;}.grid-tiles .grid-tile:after { content: "/200B";} <div class="container"> <div class="grid-tiles"> <div class="grid-tile"></div> </div> <div class="grid-tiles"> <div class="grid-tile"></div> <div class="grid-tile"></div> </div> <div class="grid-tiles"> <div class="grid-tile"></div> <div class="grid-tile"></div> <div class="grid-tile"></div> </div> <div class="grid-tiles"> <div class="grid-tile"></div> <div class="grid-tile"></div> <div class="grid-tile"></div> <div class="grid-tile"></div> </div> <div class="grid-tiles"> <div class="grid-tile"></div> <div class="grid-tile"></div> <div class="grid-tile"></div> <div class="grid-tile">Zaa</div> </div></div>. . .. ...
