如何实现正方形网格设计
How to implement squares grid design
有没有一种实用的方法可以使用 CSS 在网页上的附件图像中实现这样的设计，我唯一想到的是创建一个网格添加并为其项目提供边框并放置其余部分无论在哪里……但这确实听起来很丑陋。有什么想法吗？
这是一个使用您的布局的非常基本的网格示例。
注意：您可能需要对调整大小使用一些限制以使布局保持其纵横比。
两个重要说明：
- 在网格容器中我们使用
grid-template-areas并且我们在每个对应元素的位置上写uniqueclass进入布局。 'dots' --> . 将跳过 row/column.
- 每个唯一元素都将分配一个 class，它将使用
grid-area[=70 指向其自身=]:
.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.
相关
'get it' 的一个好方法是目视检查网格模板区域，每一行都在一个新行上，正如我在我的示例中所展示的那样。您可以看到 img-1 相对于布局中其他元素的位置。记住 点 代表什么，其中的一小部分 row/column 会被空着占据。
希望对您有所帮助。
.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 与计算值一起使用，使用变量设置并划分增量框。
您只需设置行，然后将您的元素移动到行内的相对 tot 继承人位置。它使您的设置变得容易，因为您有一定数量的框，可以使用顶部和左侧定位以及计算出的父元素百分比值 width/height。查看示例并研究 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>
有没有一种实用的方法可以使用 CSS 在网页上的附件图像中实现这样的设计，我唯一想到的是创建一个网格添加并为其项目提供边框并放置其余部分无论在哪里……但这确实听起来很丑陋。有什么想法吗？
这是一个使用您的布局的非常基本的网格示例。
注意：您可能需要对调整大小使用一些限制以使布局保持其纵横比。
两个重要说明：
- 在网格容器中我们使用
grid-template-areas并且我们在每个对应元素的位置上写uniqueclass进入布局。 'dots' -->.将跳过 row/column. - 每个唯一元素都将分配一个 class，它将使用
grid-area[=70 指向其自身=]:
.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.
'get it' 的一个好方法是目视检查网格模板区域，每一行都在一个新行上，正如我在我的示例中所展示的那样。您可以看到 img-1 相对于布局中其他元素的位置。记住 点 代表什么，其中的一小部分 row/column 会被空着占据。
希望对您有所帮助。
.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 与计算值一起使用，使用变量设置并划分增量框。
您只需设置行，然后将您的元素移动到行内的相对 tot 继承人位置。它使您的设置变得容易，因为您有一定数量的框，可以使用顶部和左侧定位以及计算出的父元素百分比值 width/height。查看示例并研究 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>