Dmitrii Pashutskii 4 months ago
Front-end development
I've been learning grid today to improve the design of Learning Story. I'm usually using flex boxes for everything but grids are so amazing.
It's so much easier to split the page into nice columns and manage them as you wish.
grid-template-columns: repeat(12, minmax(0, 1fr));

And it's especially powerful for mobile views because you can set each block to fill the needed amount of columns:
grid-column: span 2 / span 2;

I know I am slowpoke in CSS but I wish I've been using them before but not only flex boxes 😃
Daniel Schwarz 4 months ago
Grids are amazing. Some other things: gap: 1rem 1rem; // set spacing between grid items (like padding) grid-template-columns: auto 1fr auto 10rem; // fluid, fill remaining space, fluid, fixed (useful for navigation, 1fr can be empty
) place-items: center; // align-items and justify-items in one property place-content: center; // align-content and justify-content in one property