Beginner’s Guide To CSS Flex And Grid Display

Prerequisites

  • Basic Knowledge of HTML5
  • Basic Knowledge of CSS3

Web technology is evolving, nowadays it enabled us to browse any websites from any devices so for that reason our content should look awesome across every device resolutions. That's where responsive layout design comes in.

CSS, has always been there to design websites, web applications. But creating multi-column layout has always been tricky, frustrating and complex procedure. To solve this layout complication Flex and Grid was introduced to CSS3.

FLEX Fundamentals

Flex is a one-dimensional layout model that offers space allocation between items and robust alignment capabilities. A flex container expands itself to fill all the available free space or shrinks them to prevent overflow. We can define any div as a flex container by typing display:flex in the CSS.

Flex Direction is the one directional property, which set items in row wise or column wise. We can also create a reverse layout by utilizing row-reverse or column-reverse.

CSS Syntax

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Justify Content – Use justify-content CSS property on flex container div to align items across the container.

Property Values

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

Example

Align Items – Use align-items on flex container div to change the alignment of an flex item across Y axis.

Property Values

align-items: stretch;
align-items: start;
align-items: flex-start;
align-items: flex-end;
align-items: baseline;

Align Selfalign-self property is useful if you want to change alignment of an individual content, this also has same property value like align-items.

CSS Syntax –

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

GRID Fundamentals

Grid Layout is the most powerful layout design available with CSS3. Unlike flex display, Grid is two-dimensional system that means we can handle row and column both using grid layout. You can define a container as a grid-container by writing display: grid

But only defining grid is not enough here, we need to add grid-template and grid-gap along with it.

Grid Template - You can define grid-template-columns and grid-template-rows individually or two properties can be combined in grid-template

grid-template-column breaks the container into multiple columns. Similarly grid-template-row breaks the container into multiple rows.

Example

row values and column values can be pixels, percentage, or fr (fractional unit). Where fr unit allows you to set the size of a column or row as a fraction of the free space of the container.

For example, you can set a grid-template-columns like this

grid-template-columns: 1fr 1fr 1fr;


this will define each column item to one third the width of the grid container, you can also pass multiple unit size here.

grid-template-columns: 1fr 100px 1fr 1fr;

total amount of free space available to the fr units doesn't includes any non-flexible values in them.

Gap - gap is the shorthand property of row-gap and column-gap which sets space between two grid item or row item.

Example

If no row-gap is specified, it's set to the same value of column-gap.

Grid Area - The grid-area property specifies a grid item's size and location in a grid layout, this also can be used to assign a name to the grid item. After naming it we can reference that name to the grid-template-areas property of the grid container.

CSS Syntax

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | item name;

Example

Grid Template Areas - grid-template-areas can be defined by referencing the names which are already specified on grid-area property, to span the grid cells we can repeat the name of a grid-area. Adding a period (.) between two grid-area name signifies a empty or blank cell.

Example

This will create a grid template with six cells / columns in each row, total three rows and each column width of 50px.

above CSS will create this layout -

Justify Self - justify-self aligns a grid item inside of a grid cell along the row axis. This value only applies to the content inside of the single grid item.

CSS Syntax

justify-self: start | end | center | stretch;

Align Self - align-self aligns a item inside of the grid cell along with the column axis. This value only applies to the content inside of the single grid item.

CSS Syntax

align-self: start | end | center | stretch;

Place Self - place-self is a combination of align-self and justify-self in a single declaration. Which defines the placement of a item according to row and column axis.

CSS Syntax

place-self: auto | center | streach;

All major browsers, except Apple safari, supports the place-self property. You can check the supported browser's list through this link > Place Self Supported Browsers.

Justify Items - justify-items aligns the grid items along with the row axis. This value applies to the all grid items inside of the container.

CSS Syntax

justify-items: start | end | center | stretch;

Align Items - align-items aligns the grid items along with the column axis. This value applies to the all grid items inside of the container.

CSS Syntax

align-items: start | end | center | stretch;

Place Items - place-items is a combination of align-items and justify-items in a single declaration. Which defines the placement of a item according to row and column axis. The first value sets align-items and second value sets justify-items

All major browsers, except Internet Explorer, supports the place-items property. You can check the supported browser's list through this link > Place Items Supported Browsers.

Justify Content - justify-content comes in handy when the total size of the grid appears less than the whole grid container. This sets the grid along with the row (X) axis.

CSS Syntax

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

Align Content - align-content comes in handy when the total size of the grid appears less than the whole grid container, but oppose to justify-content this sets the grid along with the column (Y) axis.

CSS Syntax
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

Place Content - place-content is a combination of align-content and justify-content in a single declaration. Which defines the placement of grid according to row and column axis. The first value sets align-content and second value sets justify-content

If only one value available same value will be used for both properties.

That's all for CSS Grid and Flex Display, with this guide you will be able to create a modern, dynamic and responsive layout for your Web Pages, Web Apps. Feel free to explore this MDN Article for more insights on GRID.

Copy link
Powered by Social Snap