Day 03 of #100DaysOfCode: Layout Grids
I am following the Frontend Track on Jetbrains Academy and continuing with concepts for the 2nd stage of the Flashcard project.
Source: https://hyperskill.org/learn/step/14922
Layout Grids
When developing the interface design of a service or application, there is a layout grid system that sets the rules for placing elements on the user’s screen in advance.
Layout grids allow interface developers to create a system for arranging elements in a way that makes it easy for users to interact with content — whether it’s information, buttons, or input fields.
A Layout Grid is a structure, a set of horizontal and vertical lines.
Columns are utilized internally by grids for marking up the screen. They also use margins, which measure the distance from the edge of the screen. (Usually, nothing is located right at the edge because it’s inconvenient for the user to interact with the interface in this area).
Lastly, gutters are located between columns, providing an easy way to visually separate elements from each other. They can, for example, be used to ensure that buttons don’t overlap. When developing interfaces, you need to think carefully about the size of the margins and the distance between elements.
Grids can either be symmetrical or asymmetrical. Symmetric grids are used almost everywhere, while asymmetry is sometimes utilized to impress the user in beautiful design projects.
