网格布局是一种通过在网格中排列元素来创建排列精美的网站的设计方法，当然平面版式上也需要通过网格布局来整合图片和文字的编排。

本文将介绍网格布局的功能和魅力以及一些案例网站提供参考、学习。

索引

Indexes

一.什么是网格布局？
二.网格布局功能

2.1-可以组织和显示信息

2.2-出色的可再生性

2.3-与响应式设计良好的兼容性

三.对网格布局有参考的网址网站

3.1-NSSG

3.2-カントリーマアム

3.3-BASEMENT FACTORY PRODUCTIONS

3.4-DAC

3.5-MagaCafe

3.6-Pinterest

3.7-NASA

四.网格布局的相关设计方法

4.1-网格布局损坏

4.2-非网格设计五.总结

什么是网格布局？What is grid layout?

参考 via  http://www.benoitchalland.com/projects
图片
网格布局（也称为网格设计或网格系统）是一种设计技术之一，通过像网格一样排列使得每个元素来创建精美的图像。在诸如杂志之类的印刷材料中，有必要在狭小的空间中包装大量信息，因此通常使用网格布局以产生良好的印象，但是在网页设计中也经常使用网格布局。它还具有很高的可更新性，经常用于内容列表页面和产品列表页面，这在创建动态网站（如WordPress）时非常有用。

网格布局功能

Grid layout function

参考 via  http://recruit.amana.jp/

图片

可以组织和显示信息

Information can be organized and displayed

当您布置了许多元素时，网格布局会给您井井有条的规范，因为它可以告诉您每个元素在哪里放置和分开。

因此，即使打包了很多信息，也可以正确地组织信息，即使同时显示很多照片，制作示例，文章等，也可以使其易于理解。

出色的可再生性

Excellent renewability

文章，照片，制作示例等每天需要添加。在网格布局中，只需在顶部添加一个新元素即可添加信息，因此它具有很高的可更新性。

此外，您可以无意识地意识到左上角是最新信息，因此您可以将最新信息传达给访问过该信息的人。

与响应式设计良好的兼容性

Good compatibility with responsive design
随着Google进入移动优先指数，并且在移动设备上显示网站的重要性越来越高，人们的注意力正集中在可以优化各种设备上的显示的网格布局上。该网站首页上显示的文章列表也以网格布局进行配置，但是网格会根据屏幕的宽度自动排列，并且可以在任何设备上以最佳设计显示呈现。

对网格布局有参考的网址网站Websites with reference to grid layout


我收集了一些可能会有所帮助并有效使用网格布局的网站。大家可以自由浏览看看。

NSSG via http://nssg.jp/
图片
这是京都一家设计公司的生产结果页面。显示图像时不显示任何文本，因此看起来就像您正在查看展览。显示页面时翻转的动画和出现的元素也很时尚。 カントリーマアム   via  http://www.fujiya-peko.co.jp/countrymaam/
图片

您喜欢的国家/地区网页也以网格布局创建。在这里，每个元素都被精确地放置，并坚定地保持团结感。自适应设计，可在更改屏幕宽度时自动调整网格的大小。将鼠标悬停在元素上时，动画会给人以愉悦的印象。BASEMENT FACTORY PRODUCTIONS  via  http://www.bfp.co.jp/

图片

这是东京的一家生产公司的生产结果页面。成就以许多滚动的网格布局排列，您可以看到有很多成就。该站点还支持响应式设计，并且在更改屏幕宽度时会对齐元素。

DAC  via  https://www.dac.co.jp/
图片

这是广告公司DAC的主页。最近，越来越多的公司在公司页面的顶部采用了网格布局，其中之一就是该网站。不仅会安排新闻稿，而且还会通过安排和展示设计来增加阅读的机会。

MagaCafe   via  https://magacafe.jp/
图片

这是一个在网络杂志中使用网格布局的网站。对于希望在文章列表中牢固显示图像的媒体，采用网格布局可以显示更大的图像，因此非常合适。尽管它是一个网站，但您可以像阅读杂志一样享受它。

Pinterest   via  https://jp.pinterest.com/ (翻）
图片

Pinterest是一个著名的社交网络，但是此网页也使用网格布局。由于Pinterest也是主要的社交网站，因此其与网格布局的兼容性非常出色。在总结您的图钉的页面上，它变成一个页面，您喜欢的图像和作品被排列在该页面上，这使得观看时变得很有趣。

NASA   via  https://www.nasa.gov/
图片
网格布局还可以在NASA网站上使用。各种页面（例如新闻，图像，视频和推文）被组织并收集在对宇宙成像的彩色页面上。在网格布局下方，有一个名为“更多故事”的按钮，当按下时，显示的元素将添加到下面。这也是使用网格布局的网站上的常见设计。

网格布局的相关设计方法Related design methods of grid layout

与网格布局有关的设计方法。所有这些都是可以牢固理解网格布局基础知识的设计方法，因此我想将其与网格布局一起记住。

网格布局损坏

Bad grid layout参考 via   https://frame-optik.de/
图片

破碎的网格布局是一种敢于分解网格的设计技术。具有精心设计的网格布局的设计也很漂亮，但是通过破坏它，您可以营造一种动态感并提高独创性，并且可以创建与通常的网格布局不同的设计。设计方法比网格布局更困难，并且需要设计技能和编码技能，但是如果您能很好地掌握它，就可以创建一个非常漂亮的Web设计。请尝试一下。

非网格设计

Non grid design参考 via   http://www.abcd-architecture.fr/
图片
非网格设计是一种设计方法，其中在布局中没有规则或规律的情况下排列每个元素。通过故意打破对齐和对齐元素以及自由安排元素的Web设计规则，可以创建具有开放感的Web设计并提供特殊的用户体验。即使元素是自由布置的，也必须微调整体平衡，因此，这是一种比网格布局或破碎的网格布局需要更多设计技能的设计方法。另外，由于需要对每个页面进行细微调整，因此最好将注意力集中在需要随时间推移而创建的页面上，例如首页和登录页面。

总结

sum up长期以来，网格布局一直是人们熟悉的设计，但是由于智能手机和平板电脑的普及，如今出现了各种设备。将网格布局的基础知识纳入伱的网页设计里，伱也会学到更多，当然这和版式设计一个道理，通过栅格化网格的辅助，排列的文本、图片都能遂心应手。