CSS Grid is Two-dimensional positing rows and columns at the same time and CSS Flexbox is one-dimensional either in row or column in this article we will explain the use case of both and examples. Leave your comment if you have any questions.
1) CSS Grid
CSS Grid is a Two-dimensional positing of HTML component this is one of the advanced features in CSS which helps to provide the layout to one section or page. The grid can move rows and columns at the same time because of this we can achieve complex structures like thumbnails, thumbnails with different height and width, cards and frontend UI. Grid is the first CSS module designed specifically to address the layout issues that we’ve all been grappling with for as long as we’ve been building websites. To get started you need to set a container element as a grid such as display:grid set the column with grid-template-columns and row with grid-template-rows, then add child to rows and columns.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 0.1fr 2.5fr 1fr;
grid-template-rows: 1.2fr 0.6fr 1.4fr 1fr;
gap: 0px 0px;
grid-template-areas:
". . . . ."
". . . . ."
". . . . ."
". . . . .";
}
<div class="grid-container"></div>
2) CSS Flexbox
Flexbox was launched in 2009 as a modern layout system with the aim of making it easier to create responsive web pages and organize our components, and it’s gotten a lot of attention since then. it helps to add child and adjust space inside the container it was designed for layout in one dimension – either a row or a column.
Before the Flexbox Layout module, there were four layout modes:
Block, for sections in a webpage
Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
.container {
display: flex; /* or inline-flex */
}.container {
flex-direction: row | row-reverse | column | column-reverse;
}
3) Bootstrap
It was release in August 19, 2011 main aim to simplfy layouts and responsiveness of web pages. it took out the major pain of layout and responsiveness developer can save tons of time and can spend more time in designing and making site more interactive.
Bootstrap gives alot out of box
- Easy Documentation
- Templates
- Layouts
- Forms
- Colors
- icons
- Components
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
