Most of the web pages on the internet that you come across today, are written in combination HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets).
In short, HTML defines the content and logical structure of the page, while CSS determines the appearance such as colors, fonts, formatting, layout, and style.
{getToc} $title={Table of Contents}
Let’s start learning about Flexbox and Grid.. 🙂
What is Flexbox?
CSS flexbox is a special way to define HTML page layout,
One of the most defining features of flex layout is its ability to adapt its shape, based on its viewing environment.
Flexbox can adjust its size—either shrink, to avoid an unnecessary monopoly of space, or increase to make room for content that is constrained within its boundaries.
On the other hand, Flex less restrictive in terms of content flow than, for example, type Block Layout and inlinewhich is generally uni-directional.
Path or direction flex can be set right, left, up, or down. Individual items in flex container can also be automatically rearranged and rearranged to fit the available layout space.
Getting to Know the History of Flex
Intensive use of the Web in the 2000s by Mobile Agentmotivating “liquid-layout” and responsive elements for a larger variety of screen sizes.
In the 2010s, intensive use Framework Popular JavaScript, like Bootstrapinspired by Flexbox, and Grid Layout.
The CSS 3 module includes solutions similar to this, such as flexbox and grid.
As of September 2020 , 98.69% of installed browsers (99.29% desktop browsers and 100% mobile browsers) support Layout CSS Flexbox.
From the reference I got, this Flexbox project started from 23 July 2009, with the latest version ( Level 1 Flexbox, 9 november 2018 ) – see reference
What is Grid CSS Layout?
CSS Grid can create more asymmetrical layouts than previous grid layouts like CSS floats. CSS Grid It also allows for more standard code that works across browsers.
One problem with using float in CSS is if content is added to one part of the page it can disrupt the flow of the page and break the layout. This is due to varying heights for layout elements. Although flexbox CSS supports flexible layouts and provides the flexibility to create complex layouts, but this grid system failed when the need to create responsive layouts in 2-dimensional space began to emerge.
Getting to Know the History of CSS Grids
CSS grids it has native name CSS Grid Layout Level 1 this was first published April 7, 2007, latest version Level 1 on December 18, 2020 – read reference
For the preview version which is level 2 on March 11, 2021 W3C Candidate Recommendation Draft
Chrome, Firefox, Safariand Edge all of them support CSS grids Since October 2017 without vendor prefix. IE 10 and 11 support CSS grids but with outdated specs. On mobile, all modern browsers support CSS grids except Opera Mini and Brave Browser . Web developers targeting older browsers can use Modernizr 3.5.0 to detect and take down web pages as needed.
Example of Code Deployment with Flexbox CSS
flex sample
.container {
display : flex;
flex-direction : row;
background-color: lightblue;
}
.container > div {
background-color: #ff6161;
margins: 10px;
padding: 20px;
font-size: 30px;
}
@media (max-width: 700px) {
.container {
flex-direction: column;
}
.container>div {
margin-right: 10px;
margin-bottom: 10px;
}
}