INTRODUCTION
The tool to design the web, CSS (Cascading Style Sheets), has seen many advancements. Web developers can approach the task of styling a website in many ways. The traditional method of CSS styling relies on the box model. As web browsers advanced, Flexbox and Grid were additions to CSS created to aid developers with website layout. Utilizing Flexbox and Grid gives developers extra tools to organize a web page. While utilizing the CSS box model is still a viable way to design a website, Flexbox and Grid provide a more intuitive method to create a website’s layout. It’s important for a developer to be familiar with the rules that govern each utility.
BOX MODEL
The CSS box model is an important concept for the front end development of a website. Every element in HTML is interpreted as a box. The box model breaks down an element into multiple components:
- Content
- Padding
- Border
- Margin
The total width and height of an element is calculated by using the sum of all of the above mentioned components.
The image above illustrates the behavior of the box model. The blue square indicates that the content is 400px wide with a height of 160px. The green square shows how much padding is applied to each side. The next square show any border properties that are applied with the last square showing the margin. Developing a website using only the concept of the box model requires arranging content by manipulating components of the box model.
Designing a website by manipulating element placement based on the box model requires respect for the block vs inline concept. Block level elements always start on a new line while inline elements only take up the space required by its box.
Another concept to keep in mind when relying on the box model is the idea of collapsing margins. Margin collapse occurs when two neighboring elements share a top or bottom margin. In such cases, the larger of the two margins is shared by both elements.
In the image above, the blue box has a top margin of 20px while the yellow box has a bottom margin of 10px. However, the boxes are not separated by a margin of 30px. Instead, they both share a margin of 20px.
The box model is simple to understand and learn. It is supported by all browsers. However, the box model can act present in ways that the designer did not anticipate. Often times, using properties such as float are required to place elements in their desired locations.
FLEXBOX
The introduction of Flexbox provided a more reliable method to arrange the elements of a website. Implementing Flexbox is done by using the flex value with the display property. This creates a flex container which will act as the parent to all the elements placed inside the container.
HTML:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>CSS:
.container {
display: flex; /* This turns the container into a flex container */
flex-direction: row; /* This sets the main axis to be horizontal (left to right) */
justify-content: space-between; /* This distributes the items evenly along the main axis with equal space between them */
align-items: center; /* This aligns the items along the cross axis (top to bottom) */
}
.item {
/* Flexbox properties can also be applied to individual items */
order: 1; /* The order property controls the order in which elements appear in the flex container */
align-self: auto; /* This allows the default alignment to be overridden for individual flex items. */
}
CSS values can be applied to both the parent element flex container and the child element flex item. The most important concept to understand when working Flexbox is the main axis and the cross axis. By default, the flex value applies the ‘flex-direction: row’ styling. The ‘flex-direction’ property can also take the ‘column’ value. While ‘row’ places content next to each other, ‘column’ stacks elements on top of each other. Most importantly, the ‘flex-direction’ property establishes the main axis which in turn defines the cross axis. Understanding this relationship is the key to mastering Flexbox.
FLEX DIRECTION ROW:
FLEX DIRECTION COLUMN:
CSS Tricks is an excellent resource to understand how the various properties and values arrange elements. Flexbox is a one dimensional. The elements follow the pattern dictated by the flex direction.
GRID
Another layout module for CSS is Grid. Introduced shortly after Flexbox, Grid manipulates the layout of a website in much different way. Similar to how Flexbox is invoked, Grid is established by assigning the ‘flex’ value to ‘display’. As with Flexbox, this creates a parent container which houses all the child element grid items.
HTML:
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>CSS:
/*Create a grid container with two columns*/
.container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Two columns, each taking up 50% of the available space */
}
.item1 {
grid-column: 1 / 3; /* Span both columns*/
background-color: blue;
padding: 2rem;
margin: 20px 10px;
color: white;
}
.item2 {
grid-column: 1; /* First column*/
background-color: red;
padding: 2rem;
margin: 20px 10px;
color: white;
}
.item3 {
grid-column: 2; /* Second column*/
background-color: green;
padding: 2rem;
margin: 20px 10px;
color: white;
}
The difference between Flexbox and Grid is that unlike the one-dimensional Flexbox, Grid is two dimensional. A Grid layout does not have to be either a column or row arrangement. Grid layouts factor in both columns and rows.
Key ideas with the Grid layout are grid lines and grid cells. Grid cells are contained within grid lines, however; it is possible to have an element span multiple grid cells. This layout method makes it extremely easy to place elements in their desired location. As with Flexbox, CSS Tricks is an amazing resource to master CSS Grid.
WHICH METHOD TO CHOOSE?
Designing a website has become a less tedious task with the continued evolution of the internet and its tools. When relying on the CSS box model, developers place objects delicately, hoping not to break anything. The box model involves overlapping margins and requires a greater use of media queries to create a responsive layout. CSS Flexbox use columns or rows as the defining feature for the layout it produces. CSS Grid takes a two-dimensional approach in creating a layout. It is best for the developer to understand the main concepts behind all of these methods. CSS Flexbox and Grid in tandem provide a method to create a concise layout that does not involve hoping and guessing. Keeping the principles of the box model in mind, using Flexbox and Grid in unison are the keys to creating a responsive website.