- 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 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 –
Justify Content – Use
justify-content CSS property on
flex container div to align items across the container.
justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around;
Align Items – Use
align-items on flex container div to change the alignment of an flex item across Y axis.
align-items: stretch; align-items: start; align-items: flex-start; align-items: flex-end; align-items: baseline;
Align Self –
align-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 –
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
But only defining grid is not enough here, we need to add
grid-gap along with it.
Grid Template - You can define
grid-template-rows individually or two properties can be combined in
grid-template-column breaks the container into multiple columns. Similarly grid-template-row breaks the container into multiple rows.
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.
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.
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | item name;
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.
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.
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.
align-self: start | end | center | stretch;
Place Self -
place-self is a combination of
justify-self in a single declaration. Which defines the placement of a item according to row and column axis.
place-self: auto | center | streach;
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.
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.
align-items: start | end | center | stretch;
Place Items -
place-items is a combination of
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 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.
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.
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
Place Content -
place-content is a combination of
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
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.