Flexbox and CSS Grid

Flexbox

It is also known as CSS Flexible Box layout. It sets how a flex item will grow or shrink to fit the space available in its flex container. One of the main functions of CSS is to bring all the elements of the website into a layout. With the help of flexbox, it can be done more intelligently and dynamically.

The fundamentals of CSS Flexbox

Flexbox is based on a container in which various flex items are housed. There are two axes:
1. Main axis (left to right)
2. Cross-axis (top to bottom)
Flexbox is one-dimensional system elements that can be arranged either on the main axis or cross-axis.

The Flexbox Properties

The Flexbox module has its own set of properties. Some of these properties apply to the parent container while others apply to the flex items.

display

The flex container becomes flexible by setting the display property to flex

flex-direction

It defines in which direction the container wants to stack the flex items.

• row: left to right
• row-reverse: right to left
• column: top-down
• column reverse: bottom-up

flex-wrap

The flex-wrap property specifies whether the flex items should wrap or not.

• nowrap: no line break
• wrap: line break
• wrap-reverse: line break (with the arrangement in reverse order)

flex-flow

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.

justify-content

The justify-content property is used to align the flex items

• flex-start: left-justified
• flex-end: right-justified
• center: centered
• space-around: equally distributes the space surrounding the boxes
• space-between: equally distributes the space between the boxes

align-items

The align-items property is used to align the flex items.

• center: objects are centered
• flex-start: objects are justified on the top margin
• flex-end: objects are justified on the bottom margin
• stretch: objects are pulled to the same size
• baseline: objects are arranged on the baseline (dependent on the content)

align-content

The align-content property is used to align the flex lines.

• stretch: stretches the flex lines to take up the remaining space (default)
• center: display the flex lines in the middle of the container
• flex-start: displays the flex lines at the start of the container
• flex-end: displays the flex lines at the end of the container
• space-between: displays the flex lines with equal space between them
• space-around: displays the flex lines with space before, between, and after them

Some other properties are:

CSS Grid

CSS Grid greatly simplifies creating grid-based layouts for the web. It allows content to be placed explicitly in the grid at a defined location. It is also excellent at placing content automatically in the next available space.

Grid Properties

display

An HTML element becomes a grid container when its display property is set to the grid or inline-grid.

grid-gap

The grid-gap is straightforward and is simply the spacing between grid items. We can adjust the gap size by using one of the following properties:

• grid-column-gap: sets the gap between the columns
• grid-row-gap: sets the gap between the rows
• grid-gap: shorthand property for the grid-row-gap and the grid-column-gap properties

grid-template-columns
grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

grid-column-start
grid-column-end
grid-row-start
grid-row-end

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

grid-area

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Flexbox VS CSS Grid

The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension either a row or a column. Grid was designed for two-dimensional layout rows, and columns at the same time.

Conclusion

Using CSS Flexbox, you can save a lot of time and effort when designing the layout. The Flexboxes are automatically placed. CSS Grid gives web designers the opportunity to create appealing layouts with little effort. Thanks to the grid, you always have control over the placement of objects — even when it’s a responsive design.