CSS Grid
CSS grid allows you to create layouts on a webpage and align items in columns and rows. The difference between CSS grid and flexbox is that flexbox is for one dimensional layouts in columns or rows and grid is for two dimensional layouts for columns and rows. You can achieve the same effect with flexbox but it is a little more difficult because you will need multiple flex items but with css grid you can just have one grid for all of your elements. Now I’ll just go through some examples of how you can use CSS grid in your applications.
First, we are going to create a layout with. main column and a sidebar. Just like with flexbox how you would do display: flex, with css grid you will need to do display: grid. Now lets say you want two columns side by side of a different size. We can do that just like this.
function App() {return (<div className="App" style={{display: 'grid', gridTemplateColumns: '70% 30%'}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'blue', padding: '1em'}}>Lorem ipsum...</div></div>);}
Which will give us something that looks like this.
And since this is css grid, no matter how many divs we have it will continue to follow the 70% and 30% grid layout.
function App() {return (<div className="App" style={{display: 'grid', gridTemplateColumns: '70% 30%'}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'blue', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'green', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'yellow', padding: '1em'}}>Lorem ipsum...</div></div>);}
We could also go ahead and add another percentage and make it 40% 30% 30% which will add another column at the top so just however many of the grid percentiles you add will determine how many column you will have until it restarts and goes back to the beginning
function App() {return (<div className="App" style={{display: 'grid', gridTemplateColumns: '40% 30% 30%'}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'blue', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'green', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'yellow', padding: '1em'}}>Lorem ipsum...</div></div>);}
And then if you want some spacing between your divs you dont need to mess with the margins or anything you can just set something called gap
function App() {return (<div style={{display: 'grid', gridTemplateColumns: '40% 30% 30%', gridColumnGap: ‘1em}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'blue', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'green', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'yellow', padding: '1em'}}>Lorem ipsum...</div></div>);}
And then we can also set a gap on the bottom and top by setting a row gap
function App() {return (<div style={{display: 'grid', gridTemplateColumns: '40% 30% 30%', gridColumnGap: ‘1em’, gridRowGap: ‘1em’}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'blue', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'green', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'yellow', padding: '1em'}}>Lorem ipsum...</div></div>);}
Also, if you plan on having the same spacing for all sides then you can just use grid gap and it will look exactly the same as what we just saw
function App() {return (<div style={{display: 'grid', gridTemplateColumns: '40% 30% 30%', gridGap: ‘1em’}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'blue', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'green', padding: '1em'}}>Lorem ipsum...</div><div style={{background: 'yellow', padding: '1em'}}>Lorem ipsum...</div></div>);}
Now another thing you can do is instead of doing percentages you can split up your divs into fractions so here Im just gonna do 1fr 1fr 1fr and you’ll see they will take up the same amount of space. And since we did three of these we will have three columns
function App() {return (<div className="App" style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr'}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum dolor sit amet</div>....);}
And then if you want the middle one to be bigger than the other two you could make it 2fr
function App() {return (<div className="App" style={{display: 'grid', gridTemplateColumns: '1fr 2fr 1fr'}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum dolor sit amet</div>....);}
If you know that all of your columns are going to be the same size you can repeat
function App() {return (<div className="App" style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)'}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum dolor sit amet</div>....);}
You can do the same thing if you want to repeat two different sized fractions so you can repeat 1fr and then 3fr
function App() {return (<div className="App" style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr 3fr)'}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum dolor sit amet</div>....);}
Another thing we can do is adjust the height of all of our divs by using grid auto rows
function App() {return (<div className="App" style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridGap: ‘1em’, gridAutoRows: ‘100px}}><div style={{background: 'red', padding: '1em'}}>Lorem ipsum dolor sit amet</div>....);}
If all of this looks a little intimidating to you, there is even a website you can use which will let you adjust what you want your layout for your website to look like and it will create the css code for you.
