Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Wed, 06 Mar 2024 01:55:48 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 225069128 The Fifty-Fifty Split and Overflow https://frontendmasters.com/blog/the-fifty-fifty-split-and-overflow/ https://frontendmasters.com/blog/the-fifty-fifty-split-and-overflow/#respond Wed, 06 Mar 2024 01:55:48 +0000 https://frontendmasters.com/blog/?p=1114 A left-and-right layout is blissfully easy with CSS grid. Something like grid-auto-rows: 1fr; will do it — just put two elements as the children. This is how I like to roll though, making two equal columns that can shrink properly:

.halfs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

But Ryan Mulligan found a very interesting way to make it complicated in The Fifty-Fifty Split and Overflow. Let’s say one side needs to naturally grow with the content, but if the other side is longer, then it needs to scroll. I wouldn’t call it intuitive, but it turns out using contain: size; on the scrolling container will do the trick.

]]> https://frontendmasters.com/blog/the-fifty-fifty-split-and-overflow/feed/ 0 1114