CSS Flexible Box Layout

Submitted by admin on Thu, 04/02/2020 - 14:01
CSS Flex is all about having items flow into a container. CSS Flex is bias to working horizontally or vertically. Items can be place in one direction and still wrap to new rows/columns with: flex-wrap: wrap. Space can be divided in several ways using content-justify. Width is set with flex-basis instead of width. The order can be changes with... order. When working in rows, the height of items on the same row will be equal by default, unless you specify align-items with flex-start or flex-end.

CSS Grid

Submitted by admin on Tue, 03/31/2020 - 16:41

CSS Grid is a grid system that allows you to fill the grid with contents or assign content to a certain cell.

A great resource: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

When setting up a basic layout we can take a basic html and layout the area by their area name. When adding media lines we can go change rows, columns, template-areas and most important the order of the div blocks!

Tags