[CSS] CSS subgrid
Browser support: https://caniuse.com/?search=subgrid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 5rem;
}
.box {
border: 1px #ccc solid;
border-radius: 6px;
padding: 2rem;
text-align: center;
}
.img {
width: 100%;
height: 200px;
background-color: red;
line-height: 200px;
}
</style>
</head>
<body>
<h2>CSS subgrid (CSS子网格)</h2>
<div class="wrapper">
<div class="box">
<h2>hello world</h2>
<p>
Tailwind CSS works by scanning all of your HTML files, JavaScript
components, and any other templates for class names,
</p>
<div class="img">img</div>
</div>
<div class="box">
<h2>hello world</h2>
<p>
Tailwind CSS works by scanning all of your HTML files, JavaScript
components, and any other templates for class names, generating the
corresponding styles and then writing them to a static CSS
file.generating the corresponding styles and then writing them to a
static CSS file.
</p>
<div class="img">img</div>
</div>
<div class="box">
<h2>hello world</h2>
<p>Tailwind CSS works by</p>
<div class="img">img</div>
</div>
<div class="box">
<h2>hello world</h2>
<p>
Tailwind CSS works by scanning all of your HTML files, JavaScript
components, and any other templates for class names, generating the
corresponding styles and then writing them to a static CSS file.CSS
works by scanning all of your HTML files, JavaScript components, and
any other templates for class names, generating the corresponding
styles and then writing them to a static CSS file.
</p>
<div class="img">img</div>
</div>
</div>
</body>
</html>
The problem for this site is due to we don't know the size of the text content, so the image is not align.
What we really what is text is algin in each box, image is also algined, title should also aligned.
To resolve that, we can use CSS subgrid, which ensure that each grid can align.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, auto);
gap: 1rem;
margin-top: 5rem;
}
.box {
border: 1px #ccc solid;
border-radius: 6px;
padding: 2rem;
text-align: center;
display: grid;
grid-template-rows: subgrid;
grid-row: 1 / 4; /* 让.box跨越3行: grid-template-rows: repeat(3, auto); */
}
.img {
width: 100%;
height: 200px;
background-color: red;
line-height: 200px;
}
</style>
</head>
<body>
<h2>CSS subgrid (CSS子网格)</h2>
<div class="wrapper">
<div class="box">
<h2>hello world</h2>
<p>
Tailwind CSS works by scanning all of your HTML files, JavaScript
components, and any other templates for class names,
</p>
<div class="img">img</div>
</div>
<div class="box">
<h2>hello world</h2>
<p>
Tailwind CSS works by scanning all of your HTML files, JavaScript
components, and any other templates for class names, generating the
corresponding styles and then writing them to a static CSS
file.generating the corresponding styles and then writing them to a
static CSS file.
</p>
<div class="img">img</div>
</div>
<div class="box">
<h2>hello world</h2>
<p>Tailwind CSS works by</p>
<div class="img">img</div>
</div>
<div class="box">
<h2>hello world</h2>
<p>
Tailwind CSS works by scanning all of your HTML files, JavaScript
components, and any other templates for class names, generating the
corresponding styles and then writing them to a static CSS file.CSS
works by scanning all of your HTML files, JavaScript components, and
any other templates for class names, generating the corresponding
styles and then writing them to a static CSS file.
</p>
<div class="img">img</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号