效果如下:
關於Grid(網格) 佈局,就看大神阮一峯的Grid 網格佈局教程
效果的代碼如下:
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="content">
<img src="./img/abc.jpg" alt="">
<p>Who strives not when he should strive, who, though young and strong, is given to idleness, who is loose in his purpose and thoughts, and who is lazy-that idler never finds the way to wisdom.</p>
</div>
</div>
<div class="box">
<div class="content">
<img src="./img/abc.jpg" alt="">
<p>Happy indeed we are without hate among the hateful.</p>
</div>
</div>
<div class="box">
<div class="content">
<img src="./img/abc.jpg" alt="">
<p>Without learning, men grow as cows do increasing only in flesh not wisdom.</p>
</div>
</div>
<div class="box">
<div class="content">
<img src="./img/abc.jpg" alt="">
<p>Be fond of sleep, fond of company, indolent, lazy and irritable-this is a cause of one’s downfall.</p>
</div>
</div>
<div class="box">
<div class="content">
<img src="./img/abc.jpg" alt="">
<p>One is one’s own refuge, who else could be the refuges？</p>
</div>
</div>
<div class="box">
<div class="content">
<img src="./img/abc.jpg" alt="">
<p>Cordial friendship has a supreme taste.</p>
</div>
</div>
<div class="box">
<div class="content">
<img src="./img/abc.jpg" alt="">
<p>Deed divides beings into lower and higher ones.</p>
</div>
</div>
</div>
</body>
</html>
css代碼如下:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-self: center;
min-height: 100vh;
background-color: #222;
}
.container {
position: relative;
max-width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: minmax(100px, auto);
margin: 40px;
grid-auto-flow: dense;
grid-gap: 10px;
}
.container .box {
background-color: #333;
padding: 20px;
display: gird;
font-size: 20px;
place-items: center;
text-align: center;
color: #fff;
transition: 0.5s;
}
.container .box:hover {
background-color: #e91e63;
}
.container .box img {
position: relative;
max-width: 100px;
margin-bottom: 10px;
}
.container .box:nth-child(1) {
grid-column: span 2;
grid-row: span 1;
}
.container .box:nth-child(2) {
grid-column: span 1;
grid-row: span 2;
}
.container .box:nth-child(4) {
grid-column: span 1;
grid-row: span 2;
}
.container .box:nth-child(5) {
grid-column: span 3;
grid-row: span 1;
}
@media (max-width: 991px) {
.container {
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
grid-template-rows: minmax(auto, auto);
}
.container .box {
grid-column: unset !important;
grid-row: unset !important;
}
}