Beehaw
  • Communities
  • Create Post
  • search
    Search
  • Login
  • Sign Up
starman ( starman@programming.dev )  to Web Development@programming.devEnglish · 3 years ago

Interactive guide to CSS grid

www.joshwcomeau.com

external-link
message-square
5
link
fedilink
  • cross-posted to:
  • css@programming.dev
  • hackernews@derp.foo
19
external-link

Interactive guide to CSS grid

www.joshwcomeau.com

starman ( starman@programming.dev )  to Web Development@programming.devEnglish · 3 years ago
message-square
5
link
fedilink
  • cross-posted to:
  • css@programming.dev
  • hackernews@derp.foo
An Interactive Guide to CSS Grid
www.joshwcomeau.com
external-link
CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.
alert-triangle
You must log in or # to comment.
  • wyrmroot ( wyrmroot@programming.dev ) 
    link
    fedilink
    arrow-up
    1
    ·
    3 years ago

    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 ( starman@programming.dev ) OP
      link
      fedilink
      English
      arrow-up
      1
      ·
      3 years ago

      Yup, it’s really nice nowdays.

  • Sherry ( Sherry@programming.dev ) 
    link
    fedilink
    arrow-up
    1
    ·
    3 years ago

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

  • spartanatreyu ( spartanatreyu@programming.dev ) 
    link
    fedilink
    arrow-up
    1
    ·
    3 years 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
  • W3dd1e ( W3dd1e@programming.dev ) 
    link
    fedilink
    arrow-up
    1
    ·
    3 years ago

    When starting out, Josh Comeau’s free tutorials were awesome. I felt like I understood Flexbox so well after reading his article. He does a great job explaining it all.

Web Development@programming.dev

webdev@programming.dev

Subscribe from Remote Instance

Create a post
You are not logged in. However you can subscribe from another Fediverse account, for example Lemmy or Mastodon. To do this, paste the following into the search field of your instance: !webdev@programming.dev

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

  • Follow the programming.dev site rules
  • Keep content related to web development
  • If what you’re posting relates to one of the related communities, crosspost it into there to help them grow
  • If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

  • !html@programming.dev
  • !css@programming.dev
  • !uiux@programming.dev
  • !a11y@programming.dev
  • !react@programming.dev
  • !vuejs@programming.dev
  • !webassembly@programming.dev
  • !javascript@programming.dev
  • !typescript@programming.dev
  • !nodejs@programming.dev
  • !astro@programming.dev
  • !angular@programming.dev
  • !tauri@programming.dev
  • !sveltejs@programming.dev
  • !pwa@programming.dev

Wormhole

  • !cool_github_projects@programming.dev
Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

  • https://frontendfoc.us/ - [RSS]
  • https://wesbos.com/blog
  • https://davidwalsh.name/ - [RSS]
  • https://www.nngroup.com/articles/
  • https://sia.codes/posts/ - [RSS]
  • https://www.smashingmagazine.com/ - [RSS]
  • https://www.bennadel.com/ - [RSS]
  • https://web.dev/ - [RSS]
Credits

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

Visibility: Public
globe

This community can be federated to other instances and be posted/commented in by their users.

  • 10 users / day
  • 55 users / week
  • 321 users / month
  • 984 users / 6 months
  • 75 local subscribers
  • 5.84K subscribers
  • 781 Posts
  • 1.52K Comments
  • Modlog
  • mods:
  • snowe ( snowe@programming.dev ) 
  • Erlingur ( erlingur@programming.dev ) 
  • Ategon ( Ategon@programming.dev ) 
  • Vacant ( Vacant@programming.dev ) 
  • BE: 0.19.15
  • Modlog
  • Legal
  • Instances
  • Docs
  • Code