CSS Flex Box and CSS Grid
Flexbox was designed specifically for one-dimensional layouts, for row and columns. While CSS Grid is engineered to enable
two-dimensional layouts. Therefore, CSS Grid can easily render rows and columns simultaneously.
- Introduction
- CSS Flex Box
- CSS Grid
- Conclusion
- References
1. Introduction :
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.
Flexbox and Grid are advance property of CSS. Dimensions define the primary demarcation between Flexbox and CSS Grid. Flexbox was designed specifically for one-dimensional layouts, for row and columns. While CSS Grid is engineered to enable two-dimensional layouts. Therefore, CSS Grid can easily render rows and columns simultaneously.
2. CSS Flex Box :
CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C’s candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size. We use flexbox because we want to lay a collection of items out in one direction either row wise or columns wise.
syntax :-
selector {
display: flex; or
display: inline-flex;
…flex property..;
}
To see more effective we need to add some extra css properties:
HTML :
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS :
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
At first we need to display : flex; property then we can use flex property with ‘;’ seporator.
Let see some properties of css flexbox :
i. justify-content : justify-content inline / in row / left-right/center.
— justify-content : flex-start; align at left most side.
— justify-content : flex-end; align at right most side.
— justify-content : center; align at center point.
— justify-content : space-between; items display with equal space between them.
— justify-content : space-around; items display with equal spacing around them.
ii. align-items : align-items top-bottom/center at column;.
— align-items : flex-start; at top of page.
— align-items : flex-end; at bottom of page.
— align-items : center; at the center of page.
— align-items : stretch; Items are stretched to fit the container.
— align-items : baseline; Items display at the baseline of the container.
iii. flex-direction : flex-direction used to arrange items row wise of column wise.
— flex-direction : row: Items are placed the same as the text direction.
— flex-direction : row-reverse: Items are placed opposite to the text direction.
— flex-direction : column: Items are placed top to bottom.
— flex-direction : column-reverse: Items are placed bottom to top.
iv. order : used to re-order items.
— order : [-2,-1,0,1,2] any one of value.
v. align-self : value same as align-items but for individual items.
vi. flex-wrap — used to spread items.
— flex-wrap : nowrap; Every item is fit to a single line.
— flex-wrap : wrap; Items wrap around to additional lines.
— flex-wrap : wrap-reverse; Items wrap around to additional lines in reverse.
vii. flex-flow — flex-direction and flex-wrap are combinly used to shorthand property.
— flex-flow : value1 value2 … and so on.
3. CSS Grid :
n Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design layouts more easily and consistently across browsers. There have been other methods for controlling web page layout methods, such as tables, the box model, and CSS flex box.
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. CSS Grid is engineered to enable two-dimensional layouts. Because, CSS Grid can easily render rows and columns simultaneously.
syntax:
selector {
display: grid; or
display: inline-grid;
…grid property..;
}
To see more effective we need to add some extra css properties:
HTML :
<div class=”grid-container”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS :
.grid-container {
display: grid;
background-color: DodgerBlue;
}
.grid-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
At first we need to display : grid; property then we can use grid property with ‘;’ seporator.
Let see some properties of css grid :
i. grid-template-columns / grid-template-rows : value with repeat(repeat, %) or
ii. grid-column-gap
iii. grid-row-gap
iv. grid-gap
v. grid-auto-rows
vi. also properties from flex like — justify-items, justify-self, align-self,
vii. grid-column = it is alternetive for both grid-column-start and grid-column-end; and value = a/b means [a-(b-1)]
viii. grid-row = same as column but row wise.
ix. grid-column-start / grid-column-end : +/-value[1-(n-1)] also it work with span +[0-(n-1)]
x. grid-row-start / grid-row-end : same as ix mumber property but row wise.
xi. grid-area : [a/b/c/d] four values = grid-row-start / grid-column-start / grid-row-end / grid-column-end;
xi. order : values[-2,-1,0,1,2]
4. Conclusion :
Flex and Grid are advance properties CSS, used to provide 1-Dimensional effect row wise of column wise and 2-Dimensional effect row and column wise symultanously. CSS Flex and Grid are used to make web page responsive; It can adjust itself based on device like mobile, tablet, and desktop. Another way to provide responsive nature to HTML document is @media query. Using @media query we can set responsive nature of HTML document but CSS Flex and Grid provide default responsive nature.
5. References :
For further reading :
— CSS Flex video content : https://www.youtube.com/watch?v=JJSoEo8JSnc
— CSS Flex Excersice : https://flexboxfroggy.com/
— CSS Grid video content : https://www.youtube.com/watch?v=jV8B24rSN5o
— CSS Grid Excersice : https://cssgridgarden.com/
— https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184
— https://www.freecodecamp.org/news/the-main-differences-between-flexbox-and-css-grid-667c03461d2b/
