"Nexter" is a third project I have worked on, following along with Jonas Schmedtmann's Advanced CSS and Sass course. This project is focused on using CSS grid for overall layout of the page.
CSS grid is a two-dimensional layout system and it workes in a way that applies CSS rules to both parent element (Grid Container) and to that element children elements (Grid Items).
Find out more about CSS grid at: A complete guide to Grid
- CSS Grid
- 7-1 Patern
- SCSS(BEM)
- Responsive Web Design
- SVG Icons
There are many useful different CSS techniques and methods that are introduced througout this project.
I, perosnaly, found very useful techniques how to build responsive layouts using "minmax" functions in combination with "auto-fill" and "auto-fit" keywords to achive responsive layouts without writing media queries.
Here is an example:
Screen width 1200px:
Screen width 600px:
Also, creating complex grid-looking gallery of images is quite easy task with using "repeat" function for creating as many rows and columns as we need and using "object-fit" property on our images so they don't overflow grid cells,as shown on example below.
Another great thing about CSS grid is that we can nest two grids one inside another,which makes our life easier when it comes to layout different components, as seen on examples bellow.
On first example we used CSS grid to layout "card" items:
After that we created another grid inside first one for layout components inside each of the "card":
Consedering arhitecture of the code, in this project i used BEM methodology, and i also implemented 7-1 SASS pattern which is a great way for structuring your files. Learn more about BEM here.
In the end i will mention that CSS Grid is supported in all major browsers,but there are some exceptions.