Grid布局练习案例⼀效果图：
HTML代码
<div class="guestBook">
<h3>留⾔板</h3>
</div>
<div class="container">
<div class="item">
<img src="./images/head.jpg">
<div class="message">
<p>狗崽队队长-吴霞</p>
<span>"我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会“</span>            </div>
</div>
<div class="item">
<img src="./images/head2.jpg">
<div class="message">
<p>虾⽶球⼂</p>
<span>"我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会“</span>            </div>
</div>
<div class="item">
<img src="./images/head3.jpg">
<div class="message">
<p>侠客-秋⽥⽝</p>
<span>"我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会“</span>            </div>
</div>
<div class="item">
<img src="./images/head4.jpg">
<div class="message">
<p>翻滚的⼩⿊猫</p>
<span>"我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会“</span>            </div>
</div>
<div class="item">
<img src="./images/head5.jpg">
borderbox
<div class="message">
<p>酱酱的妈妈</p>
<span>"我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会我们是狗仔⼤会“</span>            </div>
</div>
</div>
</body>
CSS代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.guestBook {
display: grid;
width: 900px;
height: 55px;
background-color: #04a39b;
margin: 0 auto;
text-align: center;
border-radius: 0 0 8px 8px;
align-items: center;
}
h3 {
font-size: 25px;
color: #fff;
font-family: '⿊体';
}
.container {
display: grid;
width: 900px;
margin: 20px auto;
/* border: 5px solid #ccc; */
grid-template-rows: 100px 100px 100px;            grid-row-gap: 10px;
/* 新增加的额外⾏，⾼度统⼀为100px */
grid-auto-rows: 100px;
}
.
item {
display: grid;
background-color: #cccccc;
grid-template-columns: 150px 1fr;
border-radius: 5px;
}
.item img {
border-radius: 50%;
justify-self: center;
align-self: center;
width: 80px;
}
.message {
display: grid;
align-content: center;
grid-row-gap: 10px;
}
p {
font-weight: 700;
color: #04a39b;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。