【My Study Note】CSS Layout
CSS Layout
CSS (Cascading Style Sheets) is a set of rules that enhance the appearance of web pages. In the early years of the internet browsers adopted CSS because it presented an opportunity for better visual designs and more creativity.
The layout is one of the most important components of designing a good web page because layouts help divide a page into different sections, thus making the page more presentable.
CSS can enhance a web page by modifying fonts, colors, layout, size, and other style formatting options that make the web page more presentable. The browser window that is visible to the user on the screen is called the viewport.
In essence, the idea behind any CSS web layout is to create an optimally designed web page that has a good viewport at any given point.
The display property specifies the type of box that you want to use for a given HTML element. The display property determines if rendered boxes inline or block box models.
.example {
display: "block";
}This type of coding is good but evolving requirements led to the development of CSS web layouts such as flex box and grid, which helped create rules for multiple elements.
Benefits of Flex Box and Grid
- More Flexibility
- More Dimensionality
The main difference between the two is that the flexbox is one-dimensional while the grid is two-dimensional.
Overview of the difference between flexbox and grid
Flexbox
Flexbox is short for flexible box model and it was introduced before the grid layout.
Flexbox adds responsiveness to CSS with float elements and positioning. One-dimensional refers to the fact that a given flexbox container will arrange items in either a column or a row along its axis.
The flexbox container applied over an element can flex to shrink or expand. Thus resulting in a flexible responsive design.
Grid
CSS grid is similar to the flex box except it creates a two dimensional grid along both the row and column axes.
While the grid increases dimensionality and helps to create an advanced layout with relative ease, it can also lead to increased complications later.
If the element rules are not systematically defined, there is no strict rule on choosing which layout to use, but in general, flexbox is more suitable when you want to create flexible elements in smaller spaces while grids are more suitable for large-scale layouts.