Creating a magazine layout using CSS Grid Areas

The article considers the capabilities of CSS Grid, technology that allows you to create word layouts that seem as if they were laid out by hand. The author discusses two main cases of CSS GRID: a static grid, which identifies the starting and end points for each element, as well as the use of CSS Grid templates to simply translate the HTML without HTML.

The article considers the practical example of the implementation of the layout using CSS GRID, including the creation of objects, determining their position and changing the location of the elements, depending on the size of the window window. 🚀

The author also notes that CSS Grid allows us to determine the formal definition of the grid - columns and rows - on the parent element and indicate where the children should go inside the grid. 💡

One of the most difficult parts is the understanding of the syntax and using the positioning of elements. However, as soon as it is done, a whole world of opportunities opens. 🧠

• 📌 CSS Grid lets you create complex layouts
• 📌 CSS Grid has capabilities to position items
• 📌 CSS GRID lets you change the location of the items depending on the size of the window window