如何实现正方形网格设计[关闭]答案

【问题标题】：How to implement squares grid design [closed]如何实现正方形网格设计[关闭]
【发布时间】：2021-12-29 11:37:10
【问题描述】：

有没有一种实用的方法可以使用 CSS 在网页上的附加图像中实现这样的设计，我想到的只是创建一个网格添加并给它的项目一个边框并将其余的放置在任何地方......但是确实听起来很丑。有什么想法吗？

【问题讨论】：

如果你做一些研究，你可以很容易地使用 CSS grid 或 flexbox 来设计这个设计......
我认为 CSS Grids 非常适合这种布局css-tricks.com/snippets/css/complete-guide-grid
当然可以，但是对于所有这些空方块，我是否必须在整个地方放置空 div？
您可以有一个网格来帮助您定位每个“真实”元素。但要获得网格线，我只需使用几个重复的线性渐变作为背景图像。
问题已经结束，所以我无法给出正确的答案，但这是基本的想法。您可以绘制水平线和垂直线，例如： background-image: linear-gradient(transparent 0 49%, black 49% 51%, transparent 51% 100%), linear-gradient(to right, transparent 0 49%, black 49 % 51%，透明 51% 100%）；背景重复：重复；背景尺寸：100% 计算（100% / 23），计算（100% / 15）100%；

标签： html css sass

【解决方案1】：

这是一个使用布局的非常基本的网格示例。

注意： 您可能需要对调整大小使用一些限制以使布局保持其纵横比。

两个重要说明：

在网格容器中，我们使用 grid-template-areas 并且我们在每个对应元素的位置上逐字写入 unique em> 类进入布局。 'dots' --> . 将跳过 行/列的该部分。
每个唯一元素都将分配一个类，该类将使用 grid-area 指向其自身：

.img-1 {
  grid-area: img-1;
}

在我的示例中，我创建了 21 行，我认为是 16 列。这可以使用grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 或grid-template-rows: repeat(1fr) 来表示，基本上我们是在告诉网格为每个元素使用行的 1 部分 100% 的行 = 16 个相等的元素，然后将它们放置在与其相关的 DOM 中grid-template-areas.

“得到它”的一个好方法是直观地检查网格模板区域，每行都在一个新行上，正如我在我的示例中所展示的那样。您可以看到img-1 相对于布局中的其他元素占据的位置。请记住，点不代表任何内容，该行/列的一小部分将被占用，其中没有任何内容。

希望这会有所帮助。

.container {
  margin: 0 auto;
  display: grid;
  width: 550px; /*for display purposes to keep aspect ratio*/
  height: 900px; /*for display purposes to keep aspect ratio*/
  grid-template-columns: repeat(1fr);
  grid-template-rows: repeat(1fr);
  grid-auto-flow: row;
  grid-template-areas: 
  ". . . . . . . . . . . . . . ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . . . . . . . . ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . pr-2 pr-2 title-2 title-2 title-2 title-2 title-2 ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . . . title-2 title-2 title-2 title-2 title-2 ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . . . title-2 title-2 title-2 title-2 title-2 ." 
  "img-1 img-1 img-1 img-1 img-1 img-1 . . . img-2 img-2 img-2 img-2 img-2 img-2" "pr-1 pr-1 title-1 title-1 title-1 title-1 title-1 title-1 title-1 img-2 img-2 img-2 img-2 img-2 img-2" 
  ". . title-1 title-1 title-1 title-1 title-1 title-1 title-1 img-2 img-2 img-2 img-2 img-2 img-2" 
  ". . title-1 title-1 title-1 title-1 title-1 title-1 title-1 img-2 img-2 img-2 img-2 img-2 img-2" 
  "heading heading heading heading heading heading heading heading . img-2 img-2 img-2 img-2 img-2 img-2" 
  "heading heading heading heading heading heading heading heading . img-2 img-2 img-2 img-2 img-2 img-2" 
  "heading heading heading heading heading heading heading heading . pr-3 pr-3 line-3 line-3 line-3 line-3" "heading heading heading heading heading heading heading heading . pr-4 pr-4 line-4 line-4 line-4 line-4" 
  ". . . . . . . . img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  "pr-5 pr-5 title-5 title-5 title-5 title-5 title-5 title-5 img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  ". . title-5 title-5 title-5 title-5 title-5 title-5 img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  ". . title-5 title-5 title-5 title-5 title-5 title-5 img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 . img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 . img-6 img-6 img-6 img-6 img-6 img-6 img-6" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 . ico-1 ico-1 sec-1 line-5 line-5 line-5 line-5" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 . ico-1 ico-1 . . . . ." 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 desc desc desc desc desc desc desc desc" 
  "img-5 img-5 img-5 img-5 img-5 img-5 img-5 desc desc desc desc desc desc desc desc";
}

.img-1 {
  grid-area: img-1;
}

.title-2 {
  grid-area: title-2;
}

.pr-2 {
  grid-area: pr-2;
}

.img-2 {
  grid-area: img-2;
}

.title-1 {
  grid-area: title-1;
}

.pr-1 {
  grid-area: pr-1;
}

.pr-3 {
  grid-area: pr-3;
}

.pr-4 {
  grid-area: pr-4;
}

.line-3 {
  grid-area: line-3;
}

.line-4 {
  grid-area: line-4;
}

.heading {
  grid-area: heading;
}

.pr-5 {
  grid-area: pr-5;
}

.img-6 {
  grid-area: img-6;
}

.title-5 {
  grid-area: title-5;
}

.img-5 {
  grid-area: img-5;
}

.ico-1 {
  grid-area: ico-1;
}

.sec-1 {
  grid-area: sec-1;
}

.line-5 {
  grid-area: line-5;
}

.desc {
  grid-area: desc;
}

html,
body {
  height: 100%;
  margin: 0;
}


.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="section img-1"></div>
  <div class="section title-2"></div>
  <div class="section pr-2"></div>
  <div class="section img-2"></div>
  <div class="section title-1"></div>
  <div class="section pr-1"></div>
  <div class="section pr-3"></div>
  <div class="section pr-4"></div>
  <div class="section line-3"></div>
  <div class="section line-4"></div>
  <div class="section heading"></div>
  <div class="section pr-5"></div>
  <div class="section img-6"></div>
  <div class="section title-5"></div>
  <div class="section img-5"></div>
  <div class="section ico-1"></div>
  <div class="section sec-1"></div>
  <div class="section line-5"></div>
  <div class="section desc"></div>
</div>

使用带有计算值的 Flex，使用变量设置为增量框的划分。

您只需设置行，然后在行中相对于继承人的位置移动元素。它使您的设置变得容易，因为您有一定数量的框，可以使用顶部和左侧定位以及父元素宽度/高度百分比的计算值来使用。查看示例并研究 CSS 以了解它是如何实现的。

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

html {
  --w-inc: calc(100%/15);
  --h-inc: calc(100%/23);
}

#cont {
  display: flex;
  flex-direction: column;
  width: 550px;
  height: 800px;
  background-image: url('https://webstockreview.net/images/square-border-png-6.png');
  background-size: var(--w-inc) var(--h-inc);
}

.box {
border: 1px solid #ddd;
background: white;
}

.row-1 {
  width: 100%;
  height: calc(var(--h-inc) * 5);
  position: relative;
  top: var(--h-inc);
  display: flex;
}

.img-1 {
  width: calc(var(--w-inc) * 6);
  height: 100%;
}

.pr-2 {
  width: calc(var(--w-inc) * 2);
  height: 20%;
  position: relative;
  left: calc(var(--w-inc) * 1);
  top: 20%;
}

.title-2 {
  width: calc(var(--w-inc) * 5);
  height: 60%;
  position: relative;
  left: calc(var(--w-inc) * 1);
  top: 20%;
}

.row-2 {
  width: 100%;
  height: calc(var(--h-inc) * 5);
  position: relative;
  top: var(--h-inc);
  display: flex;
}

.pr-1 { 
  width: calc(var(--w-inc) * 2);
  height: 20%;
  position: relative;
  left: 0;
  flex-shrink: 0;
}
.title-1 {
  width: calc(var(--w-inc) * 7);
  height: 60%;
  flex-shrink: 0;
}
.img-2 {
  width: calc(var(--w-inc) * 6);
  height: 120%;
  position: relative;
  left: 0;
  top: -20%;
  flex-shrink: 0;
}
.row-3 { 
  width: 100%;
  height: calc(var(--h-inc) * 2);
  position: relative;
  top: calc(var(--h-inc) * 1);
  display: flex;
}
.title-3 {
  width: calc(var(--w-inc) * 8);
  height: 200%;
  position: relative;
  top: -100%;
  flex-shrink: 0;
}
.rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.row-4 {
  height: 50%;
  display: flex;
  flex-shrink: 0;
}
.pr-4 {
  width: calc(100% / 7 * 2);
  margin-left: calc(100% / 7);
  flex-shrink: 0;
}
.title-4 {
  width: 100%;
}
.row-5 {
  height: 50%;
  display: flex;
  flex-shrink: 0;
}
.pr-5 {
  width: calc(100% / 7 * 2);
  margin-left: calc(100% / 7);
  flex-shrink: 0;
}
.title-5 {
  width: 100%;
}

.row-6 {
  width: 100%;
  height: calc(var(--h-inc) * 6);
  position: relative;
  top: var(--h-inc);
  display: flex;
}

.pr-6 {
  width: calc(var(--w-inc) * 2);
  height: calc(100% / 6);
  position: relative;
  left: 0;
  top: calc(100% / 6);
  flex-shrink: 0;
}

.title-6 {
  width: calc(var(--w-inc) * 6);
  height: calc(100% / 6 * 3);
  position: relative;
  left: 0;
  top: calc(100% / 6);
  flex-shrink: 0;
}
.img-6 {
  width: calc(var(--w-inc) * 7);
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  flex-shrink: 0;
}

.rows-5 {
  width: 100%;
  height: calc(var(--h-inc) * 4);
  position: relative;
  top: var(--h-inc);
  display: flex;
}

.img-7 {
  width: calc(var(--w-inc) * 7);
  height: 150%;
  position: relative;
  left: 0;
  top: calc(100% / 6 * -3);
  flex-shrink: 0;
}
.rows-1 {
  height: 50%;
  display: flex;
  flex-shrink: 0;
}
.icon-1 {
  width: calc(100% / 8 * 2);
  margin-left: calc(100% / 8);
  flex-shrink: 0;
}
.sec-2 {
  width: calc(100% / 8);
  height:  calc(100% / 4 * 2);
}
.sec-3 {
  width: calc(100% / 8 * 4);
  height:  calc(100% / 4 * 2);
}
.rows-2 {
  height: 50%;
  width 100%;
}

<div id="cont">
  <div class="row-1">
    <div class="img-1 box">
    </div>
    <div class="pr-2 box">
    </div>
    <div class="title-2 box">
    </div>
  </div>
  <div class="row-2">
    <div class="pr-1 box">
    </div>
    <div class="title-1 box">
    </div>
    <div class="img-2 box">
    </div>
  </div>
  <div class="row-3">
    <div class="title-3 box"></div>
    <div class="rows">
      <div class="row-4">
        <div class="pr-4 box"></div>
        <div class="title-4 box"></div>
      </div>
      <div class="row-5">
        <div class="pr-5 box"></div>
        <div class="title-5 box"></div>
      </div>
    </div>
  </div>
  <div class="row-6">
    <div class="pr-6 box"></div>
    <div class="title-6 box"></div>
    <div class="img-6 box"></div>
  </div>
  <div class="rows-5">
    <div class="img-7 box"></div>
    <div class="rows">
      <div class="rows-1">
        <div class="icon-1 box"></div>
        <div class="sec-2 box"></div>
        <div class="sec-3 box"></div>
      </div>
      <div class="rows-2 box">
      </div>
    </div>
   
  </div>
</div>

【讨论】：

非常感谢您的辛勤工作！欣赏它。