Why Layout Matters
A great web developer once said that "HTML is the skeleton, JavaScript is the muscle, and CSS is the skin and hair." I believe that this is a great analogy mainly because the skeleton isn't all that appealing without the skin that covers it.
CSS has many properties that serve various purposes such as adding color, stacking elements, and defining size. This article will go through CSS use cases for positioning HTML elements on a web page. Specifically, I will be demonstrating ways of using the display property.
Creating a skeleton
To start off any given project, it's important to have a prototype, mockup, or a mental image of the kind of user interface you want to build. Having some kind of blueprint helps with staying in line with the aims of the project. The HTML code needs to be semantic, this helps when the time comes to refer to class names in the CSS declarations. I previously wrote an article on ways of writing clean code which goes into detail about good naming conventions. Read it here.
For this specific example, the HTML code that goes in between the <body></body> tags is shown below. The division tag with the class of 'veggies' can be replicated many times to display another vegetable.
<div class="garden">
<h1>Tomatoes</h1>
<div class="veggies">
<p>🍅</p>
<p>🍅</p>
<p>🍅</p>
<p>🍅</p>
<p>🍅</p>
</div>
</div>
I'll use CSS to create a layout for a garden of emoji vegetables. Speaking of emojis, here's an article I wrote about 10 emoji and their meaning.
Flex Box Layout
The flex layout is useful in aligning several elements along an axis, it allows us to specify the position of our elements along the main axis (horizontal), and the cross axis (vertical). The garden example is perfect to demonstrate this idea because plants are usually placed in order according to rows or columns. We can simply use display: flex to place the contents of the container along the main axis which in this case is horizontal. The two axes are interchanged when we define flex-direction: column;.
.garden .veggies{
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px 100px;
}
Output of the code:
Grid Layout
A similar outcome can be achieved by writing display: grid;. The Grid property creates a tabular layout that allows us to specify the number of columns as well. The code block below demonstrates this.
.garden .veggies{
justify-content: center;
padding: 50px 100px;
display: grid;
gap: 30px;
grid-template-columns: 100px 100px 100px 100px 100px;
}
The most essential property in the above CSS declaration is grid-template-columns. This property defines the number of items we can place in a single row. Removing this property will achieve the same outcome as writing display: inline-block;.
For a more responsive layout, we can modify the grid-template-columns to accept a function called repeat(), this enables auto-fill features so that the layout changes depending on the size of the device. This can be written as:
grid-template-columns: repeat(auto-fill, 100px);
Below are screenshots of the result of using the repeat() function and auto-fill on different device sizes.
iPhone SE:
iPad Mini:
Surface Duo:
Nest Hub:
This is a good example of responsive web design because we don't have to do the tedious task of writing media queries for each and every device screen width in the world😡.
Table Layout
The table layout is similar to writing HTML markup using the <table> tag and its various descendants. You could either write display:inline-table; or display: table; which both produce a different result for aligning the elements.
Wrapping Up
My preference is display: flex; because of all the supporting properties that it comes with. I've discovered that it works very well for aligning content vertically and horizontally. I know everyone has their favorite tool to use and there really is no right or wrong way to do it, the main aim is to ensure that the UI mockups are implemented on a web page.
If you read this far I'd like to recommend that you read another article I wrote about the Hypertext Markup Language. If you enjoyed reading this, feel free to share your feedback using the contact section of my website.
