html - 用网格显示内容
问题描述
我是前端设计的新手,我希望有人帮助我进行我无法弄清楚的网格设置。我想设置具有display: grid
示例图像所示功能的框。这些框稍后将包含内容。有人可以帮助我,因为我无法弄清楚。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
.grid {
padding: 50px 0;
display: grid;
grid-gap: 15px;
}
.box_a {
background: gray;
padding: 20px 40px;
}
.box_b {
background: black;
color: white;
padding: 20px 40px;
}
.box_c {
padding: 20px 40px;
background: lightblue;
}
.b1 {
grid-area: 1 / 1 / 2 / 2;
}
.b2 {
grid-area: 1 / 2 / 2 / 5;
}
.b3 {
grid-area: 2 / 1 / 3 / 5;
}
.b4 {
grid-area: 3 / 1 / 2 / 5;
}
.b5 {
grid-area: 3 / 1 / 4/ 5;
}
<section class="main">
<div class="container grid">
<div class="box_a b1">
<h2>What we do</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
<a href="#">Povezava nekam</a>
</div>
<div class="box_b b2">
<h2>How we do it</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
<a href="#">Povezava nekam</a>
</div>
<div class="box_c b3">
<div class="post_top">
<a href="#">Povezava prispevka</a>
<h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
</div>
<div class="post_bottom">
<h2>Nek podnaslov</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
</div>
</div>
<div class="box_a b4">
<a href="#">Povezava nekam</a>
<h2>Lorem Ipsum</h2>
<a href="#">Preberi več</a>
</div>
<div class="box_b b5">
<a href="#">Povezava nekam</a>
<h2>Nek srednje dolg naslov</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
</div>
</div>
</section>
解决方案
您可以像下面这样简化网格,而不需要网格区域:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
.grid {
padding: 50px 0;
display: grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap: 15px;
}
.box_a {
background: gray;
padding: 20px 40px;
}
.box_b {
background: black;
color: white;
padding: 20px 40px;
}
.box_c {
padding: 20px 40px;
background: lightblue;
}
.b2,.b5 {
grid-column:2/span 2;
}
.b3 {
grid-column:1/span 3;
}
<section class="main">
<div class="container grid">
<div class="box_a b1">
<h2>What we do</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
<a href="#">Povezava nekam</a>
</div>
<div class="box_b b2">
<h2>How we do it</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
<a href="#">Povezava nekam</a>
</div>
<div class="box_c b3">
<div class="post_top">
<a href="#">Povezava prispevka</a>
<h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
</div>
<div class="post_bottom">
<h2>Nek podnaslov</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
</div>
</div>
<div class="box_a b4">
<a href="#">Povezava nekam</a>
<h2>Lorem Ipsum</h2>
<a href="#">Preberi več</a>
</div>
<div class="box_b b5">
<a href="#">Povezava nekam</a>
<h2>Nek srednje dolg naslov</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
</div>
</div>
</section>
相关代码:
.grid {
...
grid-template-columns:1fr 1fr 1fr; /*define 3 columns*/
..
}
.b2,.b5 {
grid-column:2/span 2; /*take 2 colmuns starting from 2*/
}
.b3 {
grid-column:1/span 3; /*take 3 columns starting from 1*/
}
推荐阅读
- xml - 如何在 VBA 中使用 XPath
- electron - Electron 自动更新程序的校验和错误
- curl - Maximo - curl - 使用会话 ID 访问 API
- windows - 如何在 Windows 上更改 JPackage 应用程序的窗口图标?
- javascript - 在栏中完成进度后,即使文件已上传,也不会生成 URL
- amazon-web-services - AWS 实例只能通过 IP 访问,不能通过域名访问
- django - Django 自定义 SimpleListFilter
- css - 带有 css-loader 的 webpack - 解析错误:';' 预期的
- mysql - 用 Jest 模拟 mysql 连接
- java - 大家好你们好。我正在解决关于代码战的 6 kyu 问题,但我的代码不起作用