css grid布局_生成基本CSS Grid代码以进行动态布局

css grid布局

CSS网格生成器 (CSS Grid Generator)

This project is a way for people to use CSS Grid features quickly to create dynamic layouts.

这个项目是人们快速使用CSS Grid功能创建动态布局的一种方式。

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

您可以设置数字以及列和行的单位，然后我会为您生成一个CSS网格！ 在框中拖动以在网格中创建div。

I noticed a lot of people weren't using Grid because they felt it was too complicated and they couldn't understand it. Grid is capable of so much, and this small generator only touches on a fraction of the features. The purpose of this is so people get up and running quickly, and create more interesting layouts.

我注意到很多人没有使用Grid，因为他们觉得Grid太复杂了并且无法理解。 Grid具备如此强大的功能，而这个小型生成器仅涉及部分功能。 这样做的目的是使人们快速起步并运行，并创建更多有趣的布局。

Once you work with this a bit, I suggest checking out resources by Rachel Andrew, Jen Simmons, and Dave Geddes to dive deeper. There is also a CSS Grid Guide on CSS-Tricks, and a fun little game called Grid Garden to help you learn more!

一旦进行了一些处理，我建议您检查Rachel Andrew，Jen Simmons和Dave Geddes的资源，以更深入地研究。 在CSS-Tricks上还有一个CSS Grid Guide，以及一个有趣的小游戏Grid Garden，可以帮助您了解更多信息！

This project is open to contributions!

这个项目是开放的！

View demo 查看演示 View Github 查看Github

项目设置 (Project setup)

yarn install

Compiles and hot-reloads for development

编译和热重装以进行开发

yarn run serve

Compiles and minifies for production

编译并最小化生产

yarn run build

Run your tests

运行测试

yarn run test

Lints and fixes files

整理和修复文件

yarn run lint

翻译自: https://vuejsexamples.com/generate-basic-css-grid-code-to-make-dynamic-layouts/

css grid布局