html-使用网格显示内容

前端之家收集整理的这篇文章主要介绍了html-使用网格显示内容 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我是前端设计的新手,我希望有人帮助我解决我无法弄清楚的网格.我想设置带有display:grid功能的盒子,如示例图像所示.这些框稍后将包含内容.有人可以帮我,因为我不知道.

@H_301_5@* { 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; } @H_301_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>
最佳答案
您可以像下面那样简化网格,而无需网格区域:

@H_301_5@* { 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; } @H_301_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,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,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>

相关代码

@H_301_5@.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*/ }

猜你在找的HTML相关文章