In this blog we are going to learn about Flex and Grid in CSS and their various properties.

Flex-Box

CSS Flex-Box layout allows you to easily format HTML. Flex-Box makes it simple to align items vertically and horizontally using rows and columns. Items will “flex” to different sizes to fill the space. It makes responsive design easier.

Flex-Box can be used for few main things like scaling, vertically and horizontally aligning, and reordering of the elements in a container.

Properties Of Flex-Box

1. Display

It tells the browser that I want to use flex with this container. It is applied to parent container so all the items in the container will have flex properties.

display: flex

2. Flex Direction

a. flex-direction: row

b. flex-direction: row-reverse

c. flex-direction: column

d. flex-direction: column-reverse

3. Justify Content

a. justify-content: flex-start

b. justify-content: flex-end

c. justify-content: center

d. justify-content: space-between

e. justify-content: space-around

4. Align Self

a. align-self: auto

b. align-self: flex-start

c. align-self: flex-end

d. align-self: center

e. align-self: baseline

f. align-self: stretch

5. Flex Wrap

a. flex-wrap: wrap

b. flex-wrap: nowrap

c. flex-wrap: wrap-reverse

6. Flex Flow

combines the flex-direction and flex-wrap

7. Align Content

a. align-content: flex-start

b. align-content: flex-end

c. align-content: center

d. align-content: stretch

e. align-content: space-between

f. align-content: space-around

8. Align Items

a. align-items: flex-start

b. align-items: flex-end

c. align-items: stretch

d. align-items: center

e. align-items: baseline

9. Align Self

a. align-self: auto

b. align-self: flex-start

c. align-self: flex-end

d. align-self: center

e. align-self: baseline

f. align-self: stretch

10. Flex Grow

a. flex-grow: <integer>

11. Flex Shrink

a. flex-shrink: <integer>

12. Order

a. order: <integer>

13. Flex Basis

a. flex-basis: auto

b. flex-basis: <integer>px

Grid

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. For example, a grid container’s child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Properties Of Grid

1. Grid Area

a. grid-area: auto

b. grid-area: main

2. Grid Auto Column

a. grid-auto-columns: auto

b. grid-auto-columns: <integer>px

3. Grid Auto Row

a. grid-auto-row: auto

b. grid-auto-row: <integer>px

4. Grid Auto Flow

a. grid-auto-flow: row

b. grid-auto-flow: column

5. Grid Column Start

a. grid-column-start: auto

b. grid-column-start: <integer>

6. Grid Column End

a. grid-column-end: auto

b. grid-column-end: <integer>

7. Grid Column Gap

a. grid-column-gap: <integer>px

b. grid-column-gap: <integer>rem

c. grid-column-gap: <integer>%

8. Grid Column

Short-hand property for grid-column-start and grid-column-end

9. Grid Row Start

a. grid-row-start: auto

b. grid-row-start: <integer>

10. Grid Row End

a. grid-row-end: auto

b. grid-row-end: <integer>

11. Grid Row

Short-hand property for grid-row-start and grid-row-end

12. Grid Row Gap

a. grid-row-gap: <integer>px

b. grid-row-gap: <integer>rem

13. Grid Gap

Short-hand property for grid-row-gap and grid-column-gap

14. Grid Template Columns

a. grid-template-columns: none

b. grid-template-columns: auto auto auto

c. grid-template-columns: <integer>px/rem/fr <integer>px/rem/fr <integer>px/rem/fr

15. Grid Template Rows

a. grid-template-rows: none

b. grid-template-rows: auto auto auto

c. grid-template-rows: <integer>px/rem/fr <integer>px/rem/fr <integer>px/rem/fr

16. Grid Template Areas

a. grid-template-areas: none

b. grid-template-areas: “header header header” “sidebar sidebar main”. You can use the names to specify which area the items should occupy.

17. Grid Template

Short-hand property for grid-template-rows, grid-template-columns and grid-template-area

18. Grid

Short-hand property for grid-template-rows, grid-template-columns, grid-template-area, grid-auto-rows, grid-auto-columns and grid-auto-flow

References

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store