Flexbox and CSS Grid: A Perplexing Overview
Flexbox and CSS grid allows us to change the position of elements in our web pages. Creating multi-column layouts has always been frustrating and technologies such as floats, tables, positioning and inline-block don’t cover vertical centring.
I will be talking about Flexbox and CSS Grid basics and when to use the different layouts.
Lets dive in and find out which works best for you 😁
FlexBox.
Flexbox layout mode allows us to change the way our elements are displayed. It gives us total control over the alignment, direction, order, and size of our boxes. To use flexbox, we need to add display property.
The parent is the flex container while the children are the flex items. For the parent, we can add the following properties: flex-flow, justify-content, align-content, align-items. While for the children: order, flex and align-self.
Creating flex container
Understanding flex-direction
This CSS property sets how flex items are placed in the flex container. It accepts 4 different values:
- row (default): same as text direction
- row-reverse: opposite to text direction
- column: same as row but top to bottom
- column-reverse: same as row-reverse top to bottom
Flex-wrap
This property specifies whether the flex items should wrap or not. If the display: flex; is not added the property has no effect.
- nowrap(default value): Specifies that the items will not wrap
- wrap: specifies that the items will wrap if necessary
- wrap-reverse: specifies that the items will wrap, if necessary, in reverse order
- initial: sets this property to its default value
- inherit: inherits the property from its parent element.
Positioning the elements across the cross axis
To position elements around the cross axis, you use the align-items property. It defines the behavior of flex items along the cross axis. This accepts 5 different values:
- center: items are centered in the cross-axis
- flex-start: items are placed on the cross-start line
- flex-end: items are placed on the cross-end line
- baseline: items are aligned such as their baselines align
- stretch (default): stretch to fill the container (still respect min-width/max-width)
Positioning the elements across the Main axis
To position elements around the main axis, you use the justify-content property. It defines the behavior of flex items along the main axis. This accepts 5 different values:
- flex-start (default): items are aligned toward the start line
- center: items are centered along the line
- space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
- space-around: items are evenly distributed in the line with equal space around them
- space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same
- flex-end: items are packed toward to end line
CSS Grid
Css Grid changes the way elements are displayed using rows and columns. To use css grid, you need to add display property.
Creating rows and columns
To get started you have to define a container element as a grid with display: grid, set the column and row sizes with grid-template-columns: and grid-template-rows: The grid-template-columns accepts values in px, rems, the fraction(fr) and the percentage which specifies the number of columns.
The grid-template-rows accepts the same value as the grid-template-columns. It defines the number of rows in a grid.
Positioning Grid Items in a Grid
By default, every child of the container takes one cell. To override the positioning, you go to the child selector and define the position with grid-column-start, grid-column-end, grid-row-start and grid-row-end.
Playing with Gaps
To create gutters between each columns and rows, you use the property grid-column-gap and grid-row-gap. Grid-column-gap allows you to define gap between columns.
Grid-row-gap allows you to define gap between rows
Shortcut to specify for both row and column is done by the property grid-gap which accepts two values, the first one for row and the second one for column.
Comparing Grid and flexbox
The key difference between css grid and flexbox is that css grid is all about two-dimensional positioning (rows and columns) while flexbox is one-dimensional (flex-direction row or flex-direction column). If you just have a row or column, flexbox is the best alternative. The grid system is the best choice if you have a layout with multiple dimensions.
Browser Compatibility
Thank you for reading. I would love to hear your opinion and don’t forget to clap If you enjoyed this.
