Discussion
Loading...

Post

Log in
  • About
  • Code of conduct
  • Privacy
  • Users
  • Instances
  • About Bonfire
ppk 馃嚜馃嚭
ppk 馃嚜馃嚭
@ppk@front-end.social  路  activity timestamp 2 hours ago

Looking for examples of things you can do with grid that you cannot do with flexbox.

Has anyone found any? Bonus points for nice, well-written articles.

  • Copy link
  • Flag this post
  • Block
CSS by T. Afif :verified:
CSS by T. Afif :verified:
@css@front-end.social replied  路  activity timestamp 1 hour ago

@ppk A 2D zooming effect: https://css-tricks.com/zooming-images-in-a-grid-layout/ (not a common use case but not possible using flexbox)

Some grid pattern like I am explaining here: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/#grid-patterns (in the "grid patterns" section). Some of them can be done using flexbox but would require more complex code

CSS-Tricks

Exploring CSS Grid鈥檚 Implicit Grid and Auto-Placement Powers

When working with CSS Grid, the first thing to do is to set display: grid on the element that we want to be become a grid container. Then we explicitly define
CSS-Tricks

Zooming Images in a Grid Layout

Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off.
  • Copy link
  • Flag this comment
  • Block
CSS by T. Afif :verified:
CSS by T. Afif :verified:
@css@front-end.social replied  路  activity timestamp 1 hour ago

@ppk equal height rows based on the tallest one using grid-auto-rows: 1fr;

https://codepen.io/t_afif/pen/pvbQBoQ/8862cf9366ab9a7daf19e2599f94b8cb

Same can be done for columns but it's more interesting for rows

  • Copy link
  • Flag this comment
  • Block
Eric A. Meyer
Eric A. Meyer
@Meyerweb@mastodon.social replied  路  activity timestamp 2 hours ago

@ppk Have items span tracks?

  • Copy link
  • Flag this comment
  • Block
ppk 馃嚜馃嚭
ppk 馃嚜馃嚭
@ppk@front-end.social replied  路  activity timestamp 1 hour ago

@Meyerweb It's nice and easy with grids, but you *could* do it with flexbox and a double-width item.

My point is that it's not all that easy to figure out unique capabilities of grid (as opposed to things that are just way easier with grid).

  • Copy link
  • Flag this comment
  • Block

bonfire.cafe

A space for Bonfire maintainers and contributors to communicate

bonfire.cafe: About 路 Code of conduct 路 Privacy 路 Users 路 Instances
Bonfire social 路 1.0.2-alpha.7 no JS en
Automatic federation enabled
Log in
  • Explore
  • About
  • Members
  • Code of Conduct