DEV Community

Discussion on: Back to Basic: Should we use Flexbox or Grid?

View post
Collapse
 
ihorvorotnov profile image
Ihor Vorotnov • • Edited

Your example #2 (divide page into parts) won't work in Safari. There's no need to hack around with 100% width, there ape specific flexbox properties for that - flex-grow and/or flex-basis:

.content {
  width: 50%;
  flex-grow: 1;
}
Enter fullscreen mode Exit fullscreen mode 
.content {
  width: 50%;
  flex-basis: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Also, this is actually the case when grid would be better / simpler / easier:

.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 50% 50%;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lyrod profile image
Lyrod •

Why not "grid-template-columns: 1fr 1fr"? This will produce the same right?

Collapse
 
theodorusclarence profile image
Theodorus Clarence •

Correct, I usually use fraction unit too.

Collapse
 
theodorusclarence profile image
Theodorus Clarence • • Edited

Thanks for your addition! I edited the post!
It turns out that using flex-basis won't work with images. But it is fine on other tags