this post was submitted on 26 Nov 2023
28 points (100.0% liked)

Web Development

0 readers
1 users here now

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 1 year ago
MODERATORS
snowe@programming.dev
Ategon@programming.dev
28
Interactive guide to CSS grid (www.joshwcomeau.com)
submitted 11 months ago by starman@programming.dev to c/webdev@programming.dev
4 comments fedilink hide all child comments
top 4 comments
sorted by: hot top controversial new old
[–] wyrmroot@programming.dev 1 points 11 months ago (1 children)

As someone returning to make simple web UIs after a long stint in backend, and not wanting to learn a heavy JS framework, this is massively useful. CSS has gotten a lot of new tricks since I last checked!

[–] starman@programming.dev 1 points 11 months ago

Yup, it's really nice nowdays.

[–] Sherry@programming.dev 1 points 11 months ago

Since using tailwindcss, grids became my favorite layout. After reading this article, that is even more the case.

[–] spartanatreyu@programming.dev 1 points 11 months ago* (last edited 11 months ago)

This is a great resources for css-grid newbies, but for a single page reference with all the info I need, I rely on: https://css-tricks.com/snippets/css/complete-guide-grid/

It's basically an online book on grid-css that takes a while to read through in it's entirety, but after doing it a few times you'll understand grid on a deeper level.

Once you understand the layout, you can quickly find what you're looking for. The rough rules for the site are:

  1. Content lives is accordions, hide what you don't want to see.
  2. The grid's container info is on the left column
  3. The grid item info is on the right column