时间戳

首页 > 解决方案 > HTML 和 CSS 画廊网格设计

html - HTML 和 CSS 画廊网格设计

问题描述

我怎样才能用文字制作这个画廊，请帮忙

.wrapper { 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  width: 100%;
}
.wrapper>div img {
  max-width: 100%;
}
<div id="contents">
  <div class="wrapper">
    <div>
      <img src="one.jpg">
    </div>
    <div>
      <img src="two.jpg" alt="">
    </div>
    <div>
      <img src="one.jpg" alt="">
    </div>
    <div>
      <img src="four.jpg" alt="">
    </div>
    <div>
      <img src="two.jpg" alt="">
    </div>
    <div>
      <img src="four.jpg" alt="">
    </div>
  </div>
</div>

标签： htmlcss

解决方案

而不是使用repeat(3, 1fr)将第一列的宽度设为 2fr。使用背景颜色显示结构，因为我没有图像。

.wrapper { 
  display: grid;
  grid-template-columns: 2fr repeat(2, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  width: 100%;
}
.wrapper>div img {
  max-width: 100%;
}

.text {
  background-color: black;
  opacity: 0.25;
  color: white;
  text-align: center;
}

.wrapper>div {
  background-color: green;
}
<div id="contents">
  <div class="wrapper">
    <div>
      <img src="one.jpg">
      <div class="text">Image 1</div> 
    </div>
    <div>
      <img src="two.jpg" alt="">
    </div>
    <div>
      <img src="one.jpg" alt="">
    </div>
    <div>
      <img src="four.jpg" alt="">
    </div>
    <div>
      <img src="two.jpg" alt="">
    </div>
    <div>
      <img src="four.jpg" alt="">
    </div>
  </div>
</div>

推荐阅读