CSS Grid, CSS Flexbox: An Intro.

CSS Grid allows you to build and place elements in a grid layout on your page. It lets you create grid-like structures and can control the positioning and sizing using CSS. It’s often referred to as “two-dimensional” because you can build a page using rows and columns which, individually, could differentiate in size and colour. Below is an example, of an unordered list I created:

<ul class=”grid”>50 Ways To Leave Your Lover
 <li>You just slip out the back, Jack</li>
 <li>Make a new plan, Stan</li>
 <li>You don’t need to be coy, Roy</li>
 <li>Oh, you hop on the bus, Gus</li>
 <li>Just drop off the key, Lee</li>
</ul>

For CSS, I’ve added “display: grid” to align elements into column and rows, grid-template-columns 30% and auto. The title in the <ul> tag will occupy 30% while the spacing for the remaining <li> elements will be split evenly because I’ve added “auto”. I’ve also added grid-template-rows, 60px which will be the height for every row. Lastly, I’ve added a gap of 50px for each element.

.grid {
 display: grid;
 grid-template-columns: 30% auto;
 grid-template-rows: 60px;
 gap: 50px; 
}

Below is what the webpage looks like:

With CSS Flexbox, you can layout elements as a column or row. Using the same example as above. I’ll amend display from “grid” to “flex” and added “flex-direction: row;”. This take each element and arranges them chronologically from left to right.

If the item width is changed to 100%, each element will be distributed evenly across the row. You could add “justify-content: space-evenly;” to space out each element evenly or “justify-content: space-between;” to maximise the space between elements. You could also use “align-items: center;” to move elements to the center of the page or change your row to a column by adding “flex-direction: column;” which stacks your elements vertically. There’s a myriad of ways to play around with CSS and style your pages but you must first understand the difference between CSS grid and CSS flexbox and choose a style that works best for you or if you’re feeling brave, incorporate both!