[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>

posted @ 2025-05-25 18:57  Zhentiw  阅读(17)  评论(0)    收藏  举报