为您的布局提供5个Super CSS网格生成器

于 2019-09-26 22:44:08 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： css样式 CSS Grid
原文链接：https://www.sitepoint.com/css-grid-generators/
版权

相当长一段时间以来，CSS Grid一直是CSS最激动人心的演变。这是一个特殊的CSS工具，用于构建您可以想到的任何网络布局，从最简单到最复杂。如今，所有主要的浏览器都广泛支持CSS Grid –显然，使用浮动控件入侵布局的黑暗时代已经一去不复返了。
直接在代码编辑器中编码CSS Grid布局可能很有趣。尽管该规范是一个复杂的文档，但是构建简单布局所需的关键概念并不困难。有很多，将让你在任何时间开始，随着资源蒂芙尼布朗CSS大师，雷切尔安德鲁的电网通过实例，和仁西蒙斯的布局土地在列表的顶部。
对于那些使用可视化编辑器感到更舒适的编码布局的人，您可以尝试一些有趣的在线选项。
这是五个具有出色视觉界面的CSS在线工具，我将逐步介绍它们。这个想法是：只需单击几下即可设计基于CSS Grid的布局，获取代码并运行它！让我们将此想法进行测试，看看会发生什么。

测试页布局

在本文中，我将提供这种简单的手工编码CSS Grid布局。
html

    <main class="wrapper">
        <section class="hero">
            <h1>Cute Kitties</h1>
            <article>
                <h2>Natural beauty</h2>
            </article>
        </section>
        <section class="kitties">
            <ul>
                <li>
                    <figure>
                        <img src="https://images.unsplash.com/photo-1496661269814-a841e78df103?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
                            alt="Cute kitty Doll">
                        <figcaption>
                            <h3>Doll</h3>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="https://images.unsplash.com/photo-1469569946320-b4f13e4b7d5e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
                            alt="Cute kitty Jake">
                        <figcaption>
                            <h3>Jake</h3>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
                            alt="Cute kitty Silvester">
                        <figcaption>
                            <h3>Silvester</h3>
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </section>
    </main>
    <footer>
        <p>I ❤ CSS Grid.</p>
    </footer>

css

 /* Typography imported from Google Fonts */
        @import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');

        /* Generic styles */
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Bangers', cursive;
        }

        h1,
        h2 {
            letter-spacing: 0.1em;
        }

        h3 {
            letter-spacing: 0.2em;
        }

        /* hero image */
        .hero {
            background: url('https://images.unsplash.com/photo-1514511745018-1a24bf434b6c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ') center;
            background-size: cover;
            padding: 4rem 2rem;
            /* grid styles */
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            align-items: center;
        }

        .hero>* {
            color: white;
        }

        .hero>h1 {
            font-size: 4rem;
            padding-bottom: 1rem;
        }

        .kitties {
            padding: 2rem;
        }

        .kitties>ul {
            list-style-type: none;
            /* grid styles */
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            grid-gap: 1rem;
        }

        .kitties>ul>li {
            border: 1px solid #ccc;
            border-radius: .3rem;
        }

        .kitties>ul>li>figure {
            max-height: 220px;
            overflow: hidden;
            border-top-left-radius: .3rem;
            border-top-right-radius: .3rem;
            position: relative;
        }

        .kitties>ul>li>figure>img {
            width: 100%;
        }

        .kitties>ul>li>figure>figcaption {
            position: absolute;
            bottom: 0;
            background-color: rgba(74, 4, 42, .7);
            width: 100%;
        }

        .kitties>ul>li>figure>figcaption>h3 {
            color: white;
            padding: .75rem;
            font-size: 1.25rem;
        }

        /* footer */
        footer {
            background-color: #4a042a;
            padding: .75rem;
            color: white;
            text-align: center;
            font-size: .75rem;
        }

在这里插入图片描述
该布局具有多个HTML容器标签，在嵌套结构中充当Grid容器。我本可以使用最近添加到Grid中的新的subgrid功能，但是在编写本文时，只有Firefox 69+支持它，并且这里讨论的所有在线生成器都尚未实现此功能。

对于大多数CSS Grid生成器，我将仅将测试重点放在

  • 用作单个卡的Grid容器的上。代码如下所示： 

    .kitties > ul {
      /* grid styles */
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      grid-gap: 1rem;
    }

请注意，grid-template-columns仅通过属性的值如何使您可以通过以下方式在不进行媒体查询的情况下增加响应能力：

repeat()与auto-fit属性一起使用CSS Grid 函数。您可以根据需要添加任意数量的列，无论它们是什么，它们都将完全适合网格的宽度。
使用该minmax()功能，可确保每列至少320px宽，从而在较小的屏幕上很好地显示。
大多数CSS Grid生成器都不具备grid-template-columns使用上述CSS Grid功能进行设置的功能，因此您需要调整该工具在媒体查询中生成的值，以向布局添加响应性。

在尝试CSS Grid生成器工具时，我将用每个工具生成的代码替换上面的代码，并根据屏幕上显示的结果检查其功能。唯一的例外是列表中的第四个CSS Grid生成器，这是Masaya Kazama的Vue驱动工具。这是因为，只需单击几下并对其预设布局之一进行少量调整，就可以非常轻松快捷地构建整个布局，包括页眉和页脚。

1. CSS Grid Generator，作者：Sarah Drasner

CSS Grid Generator是由Sarah Drasner编码的闪亮的新生成器。界面非常时尚，您可以立即将基本的CSS Grid布局放在一起。

我生成了一个2列的网格，并在原始示例中转储了代码。您需要媒体查询以使布局响应。结果如下：
html

    <main class="wrapper">
        <section class="hero">
            <h1>Cute Kitties</h1>
            <article>
                <h2>Natural beauty</h2>
            </article>
        </section>
        <section class="kitties">
            <ul>
                <li>
                    <figure>
                        <img src="https://images.unsplash.com/photo-1496661269814-a841e78df103?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
                            alt="Cute kitty Doll">
                        <figcaption>
                            <h3>Doll</h3>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="https://images.unsplash.com/photo-1469569946320-b4f13e4b7d5e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
                            alt="Cute kitty Jake">
                        <figcaption>
                            <h3>Jake</h3>
                        </figcaption>
                    </figure>
                </li>
                <li>
                    <figure>
                        <img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
                            alt="Cute kitty Silvester">
                        <figcaption>
                            <h3>Silvester</h3>
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </section>
    </main>
    <footer>
        <p>I ❤ CSS Grid.</p>
    </footer>

css

/* Typography imported from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');

/* Generic styles */
h1, h2, h3 {
  font-family: 'Bangers', cursive;
}

h1, h2 {
  letter-spacing: 0.1em;  
}

h3 {
  letter-spacing: 0.2em;  
}

/* hero image */
.hero {
  background: url('https://images.unsplash.com/photo-1514511745018-1a24bf434b6c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ') center;
  background-size: cover;
  padding: 4rem 2rem;
  /* grid styles */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: center;
}

.hero > * {
  color: white;
}

.hero > h1 {
  font-size: 4rem;
  padding-bottom: 1rem;
}

.kitties {
  padding: 2rem;
}

.kitties > ul {
  list-style-type: none;
  /* Grid styles */
  display: grid; 
  grid-template-columns: 320px 320px; 
  grid-template-rows: 1fr 1fr;
  /* units for row and column gaps 
  only availablein px */
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.kitties > ul > li {
  border: 1px solid #ccc;
  border-radius: .3rem;
}

.kitties > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
  position: relative;
}

.kitties > ul > li > figure > img {
  width: 100%;
}

.kitties > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(74, 4, 42, .7);
  width: 100%;
}

.kitties > ul > li > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

/* footer */
footer {
  background-color: #4a042a;
  padding: .75rem;
  color: white;
  text-align: center;
  font-size: .75rem;
}

在这里插入图片描述
代码如下：

    .kitties > ul {
      /* grid styles */
      display: grid;
      grid-template-columns: 320px 320px;
      grid-template-rows: 1fr 1fr;
      /* units for row and column gaps
       only available in px */
      grid-column-gap: 16px;
      grid-row-gap: 16px;
    }

该工具可让您：

  • 设置行和列的数量和单位
  • 在框中拖动以将div放入其中

在撰写本文时，Sarah的CSS Grid生成器使您可以创建基于CSS Grid的布局的简单实现。作者明确指出：

尽管该项目可以为您开始基本的布局，但该项目并不是CSS Grid功能的全面介绍。这是您快速使用CSS Grid功能的一种方式。

但是，由于这是一个全新的开源工具，因此它仍在积极开发中，并邀请社区做出贡献。诸如此类的复杂功能minmax()尚未实现，但是稍后可能会找到使用它们的方法。

2. Leniolabs的LayoutIt

LayoutIt非常直观，并且比CSS Grid Generator具有更多功能。例如，它可以让你设置grid-gap的属性px，em和%单位，并设置grid-template-columns和grid-template-rows使用minmax()。但是，这还不足以确保响应能力，因此您仍然需要使用媒体查询来调整值。

另外，我也找不到设置grid-gap属性的方法，因此，如果您想在行和列之间留一些空白，则必须手动进行设置。

这是将生成的代码输入到原始示例中的结果：
html

<main class="wrapper">
  <section class="hero">
    <h1>Cute Kitties</h1>
    <article>
      <h2>Natural beauty</h2>
    </article>
  </section>
  <section class="kitties">
    <ul>
      <li>
        <figure>
          <img src="https://images.unsplash.com/photo-1496661269814-a841e78df103?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Cute kitty Doll">
          <figcaption>
            <h3>Doll</h3>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="https://images.unsplash.com/photo-1469569946320-b4f13e4b7d5e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Cute kitty Jake">
          <figcaption>
            <h3>Jake</h3>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Cute kitty Silvester">
          <figcaption>
            <h3>Silvester</h3>
          </figcaption>
        </figure>
      </li>
    </ul>
  </section>
</main>
<footer>
  <p>I ❤ CSS Grid.</p>
</footer>

在这里插入图片描述
以下是相关代码：

    .kitties > ul {
      /* grid styles */
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
      grid-template-rows: 1fr 1fr;
      /* grid gap not in code
      repeat, auto-fit, and auto-fill
      not there */
    }

3. Drew Minns的《 Griddy》

随着Griddy您可以设置使用的列和行数fr，px，%和auto单位，但没有minmax()作用。您可以同时使用px和%和以及设置justify-items和align-items属性来在列和行中添加间隙以在网格内对齐项目。您需要媒体查询来提高响应速度。

下面是生成的代码在屏幕上显示的内容：
html

<main class="wrapper">
    <section class="hero">
        <h1>Cute Kitties</h1>
        <article>
            <h2>Natural beauty</h2>
        </article>
    </section>
    <section class="kitties">
        <ul>
            <li>
                <figure>
                    <img src="https://images.unsplash.com/photo-1496661269814-a841e78df103?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
                        alt="Cute kitty Doll">
                    <figcaption>
                        <h3>Doll</h3>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="https://images.unsplash.com/photo-1469569946320-b4f13e4b7d5e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
                        alt="Cute kitty Jake">
                    <figcaption>
                        <h3>Jake</h3>
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"
                        alt="Cute kitty Silvester">
                    <figcaption>
                        <h3>Silvester</h3>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </section>
</main>
<footer>
    <p>I ❤ CSS Grid.</p>
</footer>

css

/* Typography imported from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');

/* Generic styles */
h1, h2, h3 {
  font-family: 'Bangers', cursive;
}

h1, h2 {
  letter-spacing: 0.1em;  
}

h3 {
  letter-spacing: 0.2em;  
}

/* hero image */
.hero {
  background: url('https://images.unsplash.com/photo-1514511745018-1a24bf434b6c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ') center;
  background-size: cover;
  padding: 4rem 2rem;
  /* grid styles */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: center;
}

.hero > * {
  color: white;
}

.hero > h1 {
  font-size: 4rem;
  padding-bottom: 1rem;
}

.kitties {
  padding: 2rem;
}

.kitties > ul {
  list-style-type: none;
  /* grid styles */
  display: grid;
  /* no minmax */
  grid-template-columns: 320px 320px;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.kitties > ul > li {
  border: 1px solid #ccc;
  border-radius: .3rem;
}

.kitties > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
  position: relative;
}

.kitties > ul > li > figure > img {
  width: 100%;
}

.kitties > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(74, 4, 42, .7);
  width: 100%;
}

.kitties > ul > li > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

/* footer */
footer {
  background-color: #4a042a;
  padding: .75rem;
  color: white;
  text-align: center;
  font-size: .75rem;
}

在这里插入图片描述
这是原始演示中生成的代码：

    .kitties > ul {
      list-style-type: none;
      /* grid styles */
      display: grid;
      /* no minmax */
      grid-template-columns: 320px 320px;
      grid-template-rows: 1fr 1fr;
      grid-column-gap: 16px;
      grid-row-gap: 16px;
    }

4. Masaya Kazama的Vue Grid Generator

Vue网格生成器具有几个方便的预设布局，即“圣杯”和“文章列表”，您可以通过添加和删除元素以及调整大小来轻松自定义。这就是为什么我没有将自己局限于卡片容器的CSS Grid代码，而是仅通过自定义预设的“文章列表”布局来近似整个布局的原因。

使用此工具，您可以使用grid-template-areas和相关grid-area属性来构建CSS网格。另外，您需要媒体查询以使页面响应，并且只能grid-gap手动设置属性。

这是将生成的代码复制并粘贴到新的Pen中并将html选择器的高度设置为之后的默认布局的样子100vh：
html

<div class="container">
  <div class="header">
    <h1>Cute Kitties</h1>
    <h2>Natural beauty</h2>
  </div>
  <div class="article article-0">
    <figure>
      <img src="https://images.unsplash.com/photo-1496661269814-a841e78df103?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Cute kitty Doll">
      <figcaption>
        <h3>Doll</h3>
      </figcaption>
    </figure>
  </div>
  <div class="article article-1">
    <figure>
      <img src="https://images.unsplash.com/photo-1469569946320-b4f13e4b7d5e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Cute kitty Jake">
      <figcaption>
        <h3>Jake</h3>
      </figcaption>
    </figure>
  </div>
  <div class="article article-2">
    <figure>
      <img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Cute kitty Silvester">
      <figcaption>
        <h3>Silvester</h3>
      </figcaption>
    </figure>
  </div>
  <div class="article article-3">article-3</div>
  <div class="footer">
    <p>I ❤ CSS Grid.</p>
  </div>
</div>

css

/* Typography imported from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');

/* Generic styles */
h1, h2, h3 {
  font-family: 'Bangers', cursive;
  color: white;
}

h1, h2 {
  letter-spacing: 0.1em;  
}

h3 {
  letter-spacing: 0.2em;  
}

.container {
  width: 100vw;
  height: 100vh;
  /* grid */
  display: grid;
  grid-template-areas: "header header"
  "article-0 article-1"
  "article-2 article-3"
  "footer footer";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 1fr 1fr 60px;
  
  /* not in generator */
  grid-gap: 1rem;
}
/*.container > div {
  border: 1px dashed #888;
}*/

.header {
  background: url('https://images.unsplash.com/photo-1514511745018-1a24bf434b6c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ') center;
  background-size: cover;
  padding: 4rem 2rem;
  text-align: center;
  /* grid */
  grid-area: header;
}

.header > h1 {
  font-size: 4rem;
  padding-bottom: 1rem;
}

.article {
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: .3rem;
}

.article > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
  position: relative;
}

.article > figure > img {
  width: 100%;
  min-width: 320px;
}

.article > figure > figcaption {
  padding-left: .75rem;
  position: absolute;
  bottom: 0;
  background-color: rgba(74, 4, 42, .7);
  width: 100%;
}

.article > figcaption > h3 {
  font-size: 1.25rem;
}

.article-0 {
  /* grid */
  grid-area: article-0;
}

.article-1 {
  /* grid */
  grid-area: article-1;
}

.article-2 {
  /* grid */
  grid-area: article-2;
}

.article-3 {
  /* grid */
  grid-area: article-3;
}

.footer {
  background-color: #4a042a;
  padding: .75rem;
  color: white;
  text-align: center;
  font-size: .75rem;
  /* grid */
  grid-area: footer;
}

在这里插入图片描述

5. CSS网格布局生成器，作者：Dmitrii Bykov

CSS Grid Layout Generator是Dmitrii Bykov的功能齐全的CSS Grid Generator。首先，您可以查看介绍视频，该视频简要介绍了该工具的实际功能。

该工具可为Grid容器和Grid项目提供大量设置。可用功能包括：

  • 您可以设置网格内联
  • 您可以设置使用列和行数fr，px，em，rem，vw，vh，%，min-content，max-content，甚至使用minmax()同repeat()，auto-fit和auto-fill。这意味着您的布局可以立即响应
  • 设置grid-gap属性时所有单位均可用
  • 您可以通过设置调整您的网页内容justify-items，align-items，justify-content，align-content
  • 以及更多。

回到我的原始演示，此工具是列表中唯一可以重现原始代码功能的工具。

这是CodePen演示：
html

<main class="wrapper">
  <section class="hero">
    <h1>Cute Kitties</h1>
    <article>
      <h2>Natural beauty</h2>
    </article>
  </section>
  <section class="kitties">
    <ul>
      <li>
        <figure>
          <img src="https://images.unsplash.com/photo-1496661269814-a841e78df103?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Cute kitty Doll">
          <figcaption>
            <h3>Doll</h3>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="https://images.unsplash.com/photo-1469569946320-b4f13e4b7d5e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Cute kitty Jake">
          <figcaption>
            <h3>Jake</h3>
          </figcaption>
        </figure>
      </li>
      <li>
        <figure>
          <img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Cute kitty Silvester">
          <figcaption>
            <h3>Silvester</h3>
          </figcaption>
        </figure>
      </li>
    </ul>
  </section>
</main>
<footer>
  <p>I ❤ CSS Grid.</p>
</footer>

css

/* Typography imported from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');

/* Generic styles */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bangers', cursive;
}

h1, h2 {
  letter-spacing: 0.1em;  
}

h3 {
  letter-spacing: 0.2em;  
}

/* hero image */
.hero {
  background: url('https://images.unsplash.com/photo-1514511745018-1a24bf434b6c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ') center;
  background-size: cover;
  padding: 4rem 2rem;
  /* grid styles */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: center;
}

.hero > * {
  color: white;
}

.hero > h1 {
  font-size: 4rem;
  padding-bottom: 1rem;
}

.kitties {
  padding: 2rem;
}

.kitties > ul {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-template-rows: 1fr 1fr;
    grid-gap: 1em 1em;
}

.kitties > ul > li {
  border: 1px solid #ccc;
  border-radius: .3rem;
}

.kitties > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
  position: relative;
}

.kitties > ul > li > figure > img {
  width: 100%;
}

.kitties > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(74, 4, 42, .7);
  width: 100%;
}

.kitties > ul > li > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

/* footer */
footer {
  background-color: #4a042a;
  padding: .75rem;
  color: white;
  text-align: center;
  font-size: .75rem;
}

在这里插入图片描述

结论

如果您正在寻找一种使用可视化工具快速创建基本CSS Grid布局的方法，则CSS Grid生成器会很方便。请记住，这些工具通常不会提供所有令人惊奇的CSS Grid功能。在我在此处列出的五个工具中，只有Dmitrii Bykov的CSS Grid Generator能够执行规范中详述的大多数功能，并且可以完美地再现我的原始手工编码版本。

最后，如果您在使用在线生成器时了解CSS Grid的基础知识，那么将对您有所帮助。但是，您对CSS Grid的了解越多，这些可视化编辑器就会给您带来笨拙的感觉，尤其是当您冒险进行更粗略的布局设计时。

Jay·Yuen
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值