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
Recommend
Detailed explanation of how to run jmeter under Linux system and optimize local memory
1. Install the cross-system file transfer tool un...
The difference between the knowledge of front-end developers and artists in website development
Abstract: Many companies, even most companies whos...
Summary of how to use the MySQL authorization command grant
How to use the MySQL authorization command grant:...
A quick solution to the problem of PC and mobile adaptation
When making a web page, we usually need to consid...
js to achieve waterfall flow layout (infinite loading)
This article example shares the specific code of ...
How to configure Nginx virtual host in CentOS 7.3
Experimental environment A minimally installed Ce...
Vue uses custom instructions to add watermarks to the bottom of the page
Project Scenario Add a custom watermark to the en...
Native JS to achieve draggable login box
This article shares a draggable login box impleme...
Discussion on image path issues in css (same package/different package)
In CSS files, sometimes you need to use background...
Tutorial on using portainer to connect to remote docker
Portainer is a lightweight docker environment man...
Make your text dance with the marquee attribute in HTML
Syntax: <marquee> …</marquee> Using th...
Detailed explanation of flex layout in CSS
Flex layout is also called elastic layout. Any co...
Web page production TD can also overflow hidden display
Perhaps when I name this article like this, someon...
Detailed explanation of the use of $emit in Vue.js
1. Parent components can use props to pass data t...
Using js to realize dynamic background
This article example shares the specific code of ...