Practical Guide to CSS Layouts: From Basic Blocks to Dynamic Grids - 4 Examples
Simple Layout with HTML: A Minimalist Approach with Only Semantic Elements
Given that HTML is responsive out-of-box, we can craft a simple, yet accessible layout without the need for any special CSS rules to construct it.
This simple layout involves the use of semantic elements to define the structure of the page. HTML elements possess built-in behaviors aligned with responsive design principles, ensuring elements are arranged smoothly without extra styling rules.
When starting from scratch, it’s important to organize your content inside of semantic HTML tags. For our Simple CSS layout A, we’ll use the following: <header>, <main>, <article> and <footer>.
This simple layout serves as a basic structure, using HTML semantic elements for website structure.
In keeping things simple, our layout uses the natural responsiveness of HTML elements and the clear structure of semantics. In upcoming examples, we'll look at how HTML and CSS work together, adding complexity while keeping the design intuitive and user-friendly.
Simple Layout with CSS (flexbox)
In the previous example, where we relied solely on HTML to construct our layout, we encountered limitations in space utilization. We were unable to create columns and were restricted to a horizontal flow only. To improve this, we'll incorporate a flexbox in our second example of simple layouts.
Unlike the previous layout, this one includes extra elements within the main section. To be more specific, we're arranging two blocks side by side. The order of these blocks follows a pattern: 1, 2, then 2, 1, and repeats as many times as needed, as you can see in the picture below.
<div class="container">
<main class="">
<div class="main-container">
<div class="contentBlock">
<div class="sideA background"><img src="https://placehold.co/100x30?text=Side+A" alt=""></div>
<div class="sideB background">Side B</div>
</div>
<div class="contentBlock reverse">
<div class="sideA background"><img src="https://placehold.co/100x30?text=Side+A" alt=""></div>
<div class="sideB background">Side B</div>
</div>
</div>
</main>
</div>
<style>
.contentBlock {
display: flex;
}
.sideA {
flex-basis: 33%;
}
.sideB {
flex-basis: 66%;
}
.contentBlock.reverse .sideA {
order: 2;
}
.contentBlock.reverse .sideB {
order: 1;
}
@media only screen and (max-width: 600px) {
/* For small screens we have to make sure that Images always goes first before the text */
.contentBlock {
flex-wrap: wrap;
}
.sideA,
.sideB {
flex-basis: 100%;
}
.contentBlock.reverse .sideA {
order: 1;
}
.contentBlock.reverse .sideB {
order: 2;
}
}
.container {
margin: 0 auto;
max-width: 800px;
}
</style>
The first property that we used to achieve these effects is display, which we set its value to flex, to enable flexbox on our webpage. After that, we used the flex-basis property on each child element and assigned values of 33% (for Side A) and 66% (for Side B).
In the standard layout, sideA appears before sideB due to their order in the HTML markup.
However, we also created a class called reverse, which reverses this order so that sideB appears before sideA.
This technique is useful for creating flexible layouts where the order of content needs to change based on certain conditions, such as different screen sizes or content priorities.
To sum it up, the key improvement in this layout, compared to the basic one, is that we've used a flexbox to split the main section into blocks and also applied a class to reverse the order of the elements inside each block
This layout is handy for creating easy web pages featuring images and accompanying text. In the upcoming sections on medium and complex layouts, we'll explore more intricate designs suited for larger websites with more complex structures.
Layout with medium complexity with CSS FlexBox
In this layout, we'll also use CSS FlexBox. To achieve this, we've placed elements within separate containers.
The first container, named "three-columns," contains three elements with a flex-basis value set to 33% for each, achieving the desired effect.
Next, we have two divs with the class "seven-thirty," containing elements with flex-basis properties set to 70% and 30%, respectively.
The third row features a div with the class "side-to-side," spanning the width of the screen. Here, a flex-basis isn't necessary as it automatically occupies all available space.
The final div consists of two equally sized elements, each occupying 50% of the screen. We achieved this using a flex-basis set to 50% for both elements.
To ensure responsiveness on smaller screens, we decided to align elements to occupy the full width of the screen and align vertically in a single column. To achieve this, we adjusted the flex-basis and flex-wrap properties. For containers containing two or more elements, we set the flex-basis property for each element to 100%. Additionally, we enabled the wrapping of elements by setting the flex-wrap property to "wrap."
Complex Layout with CSS Grids
Recommended by LinkedIn
Here, we are using Grid and Flexbox for our complex layout. Flexbox is used for the central section of the layout. This is the same layout that we had in the previous example. We've included that layout as part of our complex layout, occupying the main section. So, here we will provide more details on how to create this complex layout using CSS grids.
Our complex layout consists of:
This layout is common on many websites today, and it is not difficult to achieve something similar by using the grid. Another thing to consider when using a grid is making it responsive, which we have achieved using media queries and reassigning values to some properties to obtain different layouts for different screen sizes.
Firstly, let's discuss our main layout on desktop screens, as depicted in the picture above. To achieve this result, we need to enable the grid by setting the display property to "grid".
After enabling the grid on our grid container, the next step is to arrange our elements and decide what kind of measurements we want to use for our layout. So, we need to assign values to a few properties related to that, which are:
You can use any measurement here. It can be a fixed value like pixels, fractions (which we will use), percentages, or a mix of them.
We decide to use fractions. As you can see, we have three columns, each with a different size:
Instead of specifying 1fr multiple times for each column when you have a few columns taking up equal space, it's better to use the repeat function. This function takes two arguments: the number of repetitions and the measurement. For instance, repeat(4, 1fr) signifies four columns each with 1fr width. This practice enhances code readability, especially when dealing with numerous columns, as it's easier to grasp the layout at a glance.
We also used only frid-column-gap and set its value to 5px. But keep in mind that whenever setting a gap, that gap will be applied only between columns or rows, not before the first column or after the last one.
Lastly, there's the grid-template-areas property. It helps us name the different parts of our layout. We put each row in quotes and list the area names inside. These names are separated by spaces. This makes it easy to organize our layout. In our code, you can see how each row and its parts are named.
grid-template-areas:
"header header header"
"nav main aside"
"nav main article"
"footer footer footer"
We have 6 grid areas: header, nav, main, aside, article, and footer.
Additionally:
#grid-container {
display: grid;
grid-template-columns: 1fr 3fr 2fr;
grid-template-rows: auto;
grid-column-gap: 5px;
grid-template-areas:
"header header header"
"nav main aside"
"nav main article"
"footer footer footer"
;
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
article {
grid-area: article;
}
footer {
grid-area: footer;
}
Defining responsive grid with Media Queries
To ensure our grid adjusts well on different devices, we've chosen to use media queries.
Our layout is tailored for screens ranging from 481px to 767px. The only alteration we'll make is to our grid container. For this screen size, we've opted for a two-column layout. Therefore, we adjust grid-template-columns to have one column take up 2fr and the other 1fr.
This adjustment prioritizes the main section's space while maintaining the article and aside sections on the sides. By relocating the nav bar to the top, it occupies all available space. We've also tweaked the grid-template-areas property accordingly to reflect these layout changes. It's a simple process of assigning areas to sections where you want them.
Please see the code snippet below and refer to the accompanying image for further clarity.
@media (min-width: 481px) and (max-width: 767px) {
#grid-container {
grid-template-columns: 2fr 1fr;
grid-template-areas:
"header header"
"nav nav"
"main aside"
"main article"
"footer footer "
;
}
Small screen size
In the provided code, we've made adjustments specifically for smaller screens. We've modified the grid-template-columns property to have a single column that spans the entire width, set to 1 fraction. Furthermore, for grid-template-areas, we aimed for a layout where elements stack vertically in a single column.
We easily reordered the elements using grid areas. By adjusting the values of grid-template-areas, we aligned the layout as depicted in the provided illustration.
@media (max-width: 480px) {
#grid-container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"article"
"footer";
}
That concludes our journey through creating layouts in CSS, starting from the simple one to the complex one. If you enjoyed this article or found it helpful, feel free to share it with your network. Thank you 🙂 !