Grid systems in web design

Formation of the grid system
In 1692, the newly crowned French King Louis XIV felt that the level of printing in France was far from satisfactory, so he ordered the establishment of a special royal committee to manage printing. Their first task was to design a new font that was scientific, rational, and functional. The committee was led by mathematician Nicolas Jaugeon. They used Roman fonts as the basis and adopted a grid as the design basis. Each font square was divided into 64 basic square units, and each square unit was further divided into 36 small grids. In this way, a printed layout consists of 2304 small grids. In this rigorous geometric grid network, they designed the shape of the font, the layout of the layout, and tested the effectiveness of the communication function. This was the earliest scientific experiment on fonts and layouts in the world, and also the earliest prototype of the grid system.
The grid system is called “grid systems” in English, and some people translate it as “grid system”, which are actually the same thing. However, in terms of definition, grid is more accurate. The definition of grid found on Wikipedia is: grid design system (also known as grid design system, standard size system, program layout design, Swiss graphic design style, international graphic design style) is a method and style of graphic design. The layout of the page is designed with a fixed grid and its style is neat and concise. It became very popular after World War II and has become one of the mainstream styles of publication design today.
Grid system in web design <br />My definition of web grid system is: using a regular grid array to guide and regulate the layout and information distribution of a web page.
The web page grid system is developed from the flat grid system. For web design, the use of grid system can not only make the information presentation on the web page more beautiful and easy to read, but also more usable. Moreover, for front-end development, web pages will be more flexible and standardized.

Grid systems are increasingly used in current web design. I have collected an article about the application of grid systems from the Internet: 30 top blog website designs based on grid systems.

Previous Page 1 2 Next Page Read Full Article

<<: Why the disk space is not released after deleting data in MySQL

>>: CSS beginner tutorial: background image fills the entire screen

Solution to Nginx SSL certificate configuration error

Grid systems in web design

Solution to Nginx SSL certificate configuration error

Linux kernel device driver advanced character device driver notes

Summary of some tips on MySQL index knowledge

Native JS to implement paging click control

Build a Docker image using Dockerfile

CSS achieves the effect of two elements blending (sticky effect)

Introduction to commonly used MySQL commands in Linux environment

Detailed examples of ajax usage in js and jQuery

Docker deploys nginx and mounts folders and file operations

Solutions to MySql crash and service failure to start

Recommend

Detailed explanation of MySQL solution to USE DB congestion

Execute the shell or program inside the Docker container on the host

Detailed explanation of MySQL master-slave replication practice - GTID-based replication

Detailed explanation of MySQL multi-version concurrency control mechanism (MVCC) source code

Analysis and explanation of the differences between DIV, Table and XHTML website building

Tutorial on using portainer to connect to remote docker

Linux kernel device driver Linux kernel basic notes summary

CSS removes the dotted border generated when clicking a link. Compatible with browsers that meet W3C standards

Summarize the commonly used nth-child selectors

Life cycle and hook functions in Vue

Building a LEMP (Linux+Nginx+MySQL+PHP) environment under CentOS 8.1 (tutorial details)

Detailed steps for using jib for docker deployment in Spring Cloud

A brief analysis of vsftpd service configuration in Linux (anonymous, user, virtual user)

Detailed explanation of the difference between chown and chmod commands in Linux

JS implements a simple counter