12 Column Bootstrap Grid in 3 Lines of Code!

happy monday y’all ✌

i wanted to talk about one of my favorite things - css grid! ive been using it for a while now and love how clean and easy it is to use

🀨: wait angela, why not use the π™žπ™£π™¨π™šπ™§π™© π™›π™§π™–π™’π™šπ™¬π™€π™§π™  grid system? bootstrap 12 column is *so easy*

πŸ‘©β€πŸ’»: well…what if i told you it is possible to get a bootstrap-like 12 column layout…in only 3 lines of code 𝘯𝘒𝘡π˜ͺ𝘷𝘦𝘭𝘺

🚨🚨🚨

in your container div or selector class, simply write:

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}


𝐯𝐨𝐒π₯𝐚! now you have a basic bootstrap grid implemented with ~z e r o~ frameworks! the first line is telling the class to use css grid. the second line is architecting the grid layout. there are so many ways to set this, but in this example we want 12 columns across with the width of 1fr (fractional unit = 1 part of the available space). the third line defines the physical gap between each grid unit

to use this, just assign each child class a column width value, just like bootstrap.

.child-item {
grid-column: span 3;
}

would be equivalent to giving an element β€œcol-3β€œ in bootstrap.

β€”β€”

this is one of the many cool things css grid can do, i’ve seen super robust layouts, periodic tables and calendars made with just a few lines of code. css grid has other properties that help with responsiveness (min-max) too!

my favorite tutorial is wes bos’s free css grid course at: https://cssgrid.io/

have you tried css grid yet?

Original post on Instagram: https://www.instagram.com/p/B-8V9BNnArN/