super三种关键字用法_5种用于布局的Super CSS网格生成器

最新推荐文章于 2024-04-21 09:48:04 发布

culi3182

最新推荐文章于 2024-04-21 09:48:04 发布

阅读量985

点赞数

文章标签： python java css 人工智能 javascript ViewUI

原文链接：https://www.sitepoint.com/css-grid-generators/

版权

super三种关键字用法

CSS Grid has turned out to be the most exciting evolution of CSS for quite a while. It’s a specific CSS tool for building any web layout you can think of, from the simplest to the most complex. Today, CSS Grid is widely supported by all major browsers — it’s clear that the dark days of hacking layouts using floats are gone forever.

相当长一段时间以来， CSS Grid一直是CSS最激动人心的演变。这是一个特定CSS工具，用于构建您可以想到的任何网络布局，从最简单到最复杂。如今，所有主要的浏览器都广泛支持CSS Grid-显然，使用浮点数来黑布局的黑暗时代已经一去不复返了。

Coding your CSS Grid layout directly in your code editor can be fun. Although the spec is a complex document, the key concepts you would need to build a simple layout don’t have a steep learning curve. There are many resources that will get you started in no time, with CSS Master by Tiffany Brown, Rachel Andrew’s Grid by Example, and Jen Simmons’s Layout Land at the top of the list.

直接在代码编辑器中编码CSS Grid布局可能很有趣。尽管该规范是一个复杂的文档，但是构建简单布局所需的关键概念并不困难。 Tiffany BrownCSS Master ，Example的Rachel Andrew的Grid以及Jen Simmons的Layout Land都是列表中的佼佼者，这里有很多资源可以立即帮助您入门。

For those of you who feel more comfortable coding layouts using a visual editor, there are several interesting online options that you can try out.

对于那些使用可视化编辑器感到更舒适的编码布局的人，您可以尝试一些有趣的在线选项。

Here are five CSS online tools with great visual interfaces that I’m going to put through their paces. The idea is: design your CSS Grid-based layouts in a few clicks, grab the code and run with it! Let’s put this idea to the test and see what happens.

这是五个具有出色视觉界面CSS在线工具，我将逐步介绍它们。这个想法是：只需单击几下即可设计基于CSS Grid的布局，获取代码并运行它！让我们将此想法进行测试，看看会发生什么。

测试页布局 (The Test Page Layout)

In this article, I’m going to provide this simple hand-coded CSS Grid layout.

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

See the Pen responsive CSS Grid example by Maria Antonietta Perna (@antonietta) on CodePen.

见笔响应CSS电网例如由玛丽亚安东尼塔翡翠( @antonietta )上CodePen 。

The layout has more than one HTML container tag working as a Grid container in a nested structure. I could have used the new subgrid feature that’s been recently added to Grid, but at the time of writing only Firefox 69+ supports it, and none of the online generators discussed here have implemented this functionality yet.

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

For most of the CSS Grid generators, I’m going to focus my tests only on the <ul> that works as Grid container for the individual cards. This is what the code looks like:

对于大多数CSS Grid生成器，我将仅将测试重点放在<ul>上，该<ul>用作单个卡的Grid容器。代码如下所示：

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

Notice how the value of the grid-template-columns property alone enables you to add responsiveness without media queries by:

请注意，仅通过grid-template-columns属性的值如何通过以下方式使您无需媒体查询即可添加响应能力：

using the CSS Grid repeat() function together with the auto-fit property. You can add as many columns as you want and they will fit perfectly into the grid’s width, whatever that may be.
结合使用CSS Grid repeat()函数和auto-fit属性。您可以根据需要添加任意数量的列，无论它们是什么，它们都将完全适合网格的宽度。
using the minmax() function, which ensures that each column is at least 320px wide, thereby displaying nicely on smaller screens.
使用minmax()函数，该函数可确保每列的宽度至少为320px ，从而可以在较小的屏幕上很好地显示。

Most CSS Grid generators don’t include the ability to set the grid-template-columns using the CSS Grid features above, so you’ll need to adjust the values generated by the tool inside media queries to add responsiveness to your layouts.

大多数CSS网格生成器都不具备使用上述CSS网格功能设置grid-template-columns的功能，因此您需要调整媒体查询中该工具生成的值，以增加对布局的响应度。

As I try out the CSS Grid generator tools, I’m going to replace the code above with the code generated by each tool, and examine its capabilities against the results displayed on the screen. The exception will be the fourth CSS Grid generator in the list, a Vue-powered tool by Masaya Kazama. This is because it makes it quite straightforward and quick to build the entire layout, including header and footer, with a few clicks and minor adjustments to one of its preset layouts.

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

Enough talking, let’s dive right in!

聊够了，让我们直接潜水！

1. CSS Grid Generator，作者：Sarah Drasner (1. CSS Grid Generator by Sarah Drasner)

CSS Grid Generator is a shiny new generator coded by Sarah Drasner. The interface is super sleek and you can put together a basic CSS Grid layout in no time.

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

I generated a 2-column grid and dumped the code in my original example. You need media queries to make the layout responsive. Here’s the result:

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

See the Pen CSS Grid Generator #1 by Sarah Drasner by Maria Antonietta Perna (@antonietta) on CodePen.

见笔CSS网格产生萨拉Drasner＃1由玛丽亚安东尼塔翡翠( @antonietta )上CodePen 。

The code looks like this:

代码如下：

.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;
    }

This tool lets you:

该工具可让您：

set the numbers and units of rows and columns
设置行和列的数量和单位
drag within the boxes to place divs within them
在框中拖动以将div放入其中

At the time of writing, Sarah’s CSS Grid generator lets you create simple implementations of CSS Grid-based layouts. This is clearly stated by the author:

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

Though this project can get a basic layout started for you, this project is not a comprehensive tour of CSS Grid capabilities. It is a way for you to use CSS Grid features quickly.

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

However, since this is a brand new open-source tool, it’s still in active development and the community is invited to contribute. Complex features like minmax() are not implemented yet, but they might find their way into it at a later time.

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

2. Leniolabs的LayoutIt (2. LayoutIt by Leniolabs)

LayoutIt is quite intuitive and has a few more features than CSS Grid Generator. For example, it lets you set the grid-gap property in px, em and % units, and set grid-template-columns and grid-template-rows using minmax(). However, this is not enough to ensure responsiveness, so you’ll still need to adjust your values using media queries.

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

Also, I found no way of setting the grid-gap property, so you’ll have to do it manually if you’d like some white space in between rows and columns.

另外，我发现没有办法设置grid-gap属性，因此如果您想在行和列之间留一些空白，则必须手动进行设置。

Here’s the result as I entered the generated code into my original example:

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

See the Pen CSS Grid Generator #2 by Leniolabs by Maria Antonietta Perna (@antonietta) on CodePen.

请参阅CodePen上的Maria Antonietta Perna( @antonietta )的Leniolabs提供的Pen CSS Grid Generator＃2 。

Below is what the relevant code looks like:

下面是相关代码：

.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) (3. Griddy by Drew Minns)

With Griddy you can set the number of columns and rows using fr, px, % and auto units, but there’s no minmax() function. You can add gaps to your columns and rows using both px and % and set justify-items and align-items properties to align items within the grid. You’ll need media queries for responsiveness.

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

Below is what the generated code displays on the screen:

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

See the Pen CSS Grid Generator #3 by Drew Minns by Maria Antonietta Perna (@antonietta) on CodePen.

见笔CSS网格产生德鲁Minns＃3由玛丽亚安东尼塔翡翠( @antonietta )上CodePen 。

Here’s the generated code in place on the original demo:

这是原始演示中生成的代码：

.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 (4. Vue Grid Generator by Masaya Kazama)

Vue Grid generator tool by Masaya Kazama

Vue Grid Generator has a couple of handy preset layouts, the Holy Grail and the Article List, that you can easily customize by adding and removing elements and adjusting sizes. This is the reason why, instead of confining myself to the CSS Grid code for the cards container, I approximated the entire layout simply by customizing the preset Article List layout.

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

This tool lets you build your CSS Grid using the grid-template-areas and related grid-area properties. Also, you need media queries to make the page responsive and you can only set the grid-gap property manually.

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

Here’s what the default layout looked like after I copied and pasted the generated code into a new Pen and set the html selector’s height to 100vh:

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

Below is the final result, after a few CSS and HTML adjustments to approximate the look and feel of the original demo:

在经过一些CSS和HTML调整以近似原始演示的外观之后，下面是最终结果：

See the Pen CSS Grid Generator #4 by Masaya Kazama by Maria Antonietta Perna (@antonietta) on CodePen.

见笔CSS网格产生的风间雅也＃4由玛丽亚安东尼塔翡翠( @antonietta )上CodePen 。

5. CSS网格布局生成器，作者：Dmitrii Bykov (5. CSS Grid Layout Generator by Dmitrii Bykov)

CSS Grid generator coded by Dmitrii Bykov

CSS Grid Layout Generator is a fully-featured CSS Grid generator by Dmitrii Bykov. To get started, you can check out the intro video, which gives you a short overview of the tool’s capabilities in action.

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

The tool makes available tons of settings, both for the Grid container and the Grid items. Available features include:

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

You can set the Grid inline
您可以设置网格内联
You can set the number of columns and rows using fr, px, em, rem, vw, vh, %, min-content, max-content and even use minmax() with repeat(), auto-fit and auto-fill. This means that your layout can be responsive out of the box
您可以使用fr ， px ， em ， rem ， vw ， vh ， % ， min-content ， max-content设置列数和行数，甚至可以将minmax()与repeat() ， auto-fit和auto-fill 。这意味着您的布局可以立即响应
All the units are available when setting the grid-gap property
设置grid-gap属性时，所有单位均可用
You can align your page’s content by setting justify-items, align-items, justify-content, align-content
您可以通过设置justify-items ， align-items ， justify-content ， align-content
and much more.
以及更多。

Going back to my original demo, this tool is the only one in the list that could reproduce the original code’s functionality.

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

Here’s the CodePen demo:

这是CodePen演示：

See the Pen CSS Grid Generator #5 by Dmitrii Bykov by Maria Antonietta Perna (@antonietta) on CodePen.

见笔CSS网格产生由德米特里·贝科夫＃5由玛丽亚安东尼塔翡翠( @antonietta )上CodePen 。

结论 (Conclusion)

CSS Grid generators can be handy if you’re looking for a way to create a basic CSS Grid layout quickly using a visual tool. Keep in mind that not all of the amazing CSS Grid features are usually made available by these tools. Among the five tools I listed here, only Dmitrii Bykov’s CSS Grid generator is capable of most of the features detailed by the spec and could reproduce my original hand-coded version flawlessly.

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

Finally, it helps if you know the basics of CSS Grid when using online generators. However, the more you learn about CSS Grid the clunkier these visual editors will feel to you, especially when you venture into bolder layout designs.

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