html - CSS网格方块布局




css3 css-grid (3)

** @ fcalderan的答案解决了这个问题并保留了所有信用。 **

这显然打破了方形,但如果您使用任何文字,小调整对您有利。 您可能更愿意使用 ::after 伪元素来不降低或拆分潜在内容。 更改为 display: block 也消除了 vertical-aling: top 的必要性 vertical-aling: top 据我所知, vertical-aling: top

为了在使用文本时进一步保持纵横比,我将文本 position: absolute

使用 ::before vs. ::after 时,请参阅下面的代码片段来说明我的观点。

.container,
.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

.container div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.container2 div::after {
  content: "";
  padding-bottom: 100%;
  display: block;
}

.container2 .text {
  position: absolute;  
}

.container2 div {
  background-color: green;
  position: relative;
  overflow: hidden;
}
<div class="container">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>
  
  <hr>
  <div class="container2">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>

这个问题在这里已有答案:

我正在尝试创建由正方形组成的网格/布局。 每行四个方格。 正方形不能在屏幕大小调整上扭曲。 宽度和高度必须始终相同(我不想要固定值)。 我必须使用CSS网格。 谁能帮我 ?

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>


为了有趣,对 grid 行为的好奇心和避免伪元素,

您还可以将高度设置为等于网格容器的宽度,网格系统将自动拉伸行。

一个很好的提醒:

https://css-tricks.com/snippets/css/complete-guide-grid/

和示例 https://gridbyexample.com/

如果您的网格使用整个浏览器的宽度,则使用示例

  * {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: calc(50vw - 5px);  /*instead playing around with grid gap gap */
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.container div {
  /* bg to show i'm squarred or not ? */
  background-image: linear-gradient( 45deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%);
 
 margin: 0 5px 5px 0;  /*instead playing around with grid gap gap */
  background-color: red;
}


/* extra for demo, not needed */

.container {
  counter-reset: test;
}

.container div {
  display: flex;  /* or grid */
}

.container div:before {
  counter-increment: test;
  content: 'Div N°:'counter(test)' -';
  margin: auto;/* center me */
  color: yellow;
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

用于分叉或玩耍的codepen


只使用CSS,您可以使用伪元素始终将宽高比保持为 1:1 ,例如

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

.container div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>







css-grid