Thank you all for the comments on the last article, it really does mean a lot. I hope you learn one or two things from this article.
In this article, we'll explore two fundamental concepts in CSS—positioning and layout. Positioning and layout are at the heart of creating visually appealing and functional webpages. Mastering these concepts allows you to craft responsive designs that enhance user experience. By the end, you'll know how to use these techniques to structure your webpages like a pro.
- Positioning and Layout
CSS Positioning controls how elements are positioned or placed on a web page. Positioning is influenced by the offset values Top, Bottom, Left and Right when applicable. There are 5 main CSS Position values;
1. Static: All HTML elements are positioned static by default. This simply means the element is unchanging and does not move and is not influenced by the offset values Top, Bottom, Left and Right.
2. Relative: Elements are positioned relative to their normal position.
3. Absolute: Elements are positioned relative to their nearest ancestor(parent) or the viewport.
4. Fixed: Elements are positioned relative to the viewport and remain fixed during scrolling.
5. Sticky: Sticky positioning allows an element to switch between relative and fixed positions based on scroll position and offset values Top, Bottom, Left and Right.
Below is an illustration that explains CSS positioning.
Here is the code that helped bring the illustration to life. Feel free to copy and modify on your own.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Positioning</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="static">
<h2>Static Position</h2>
<p>This div has a static position. It is positioned relative to its normal position, which means it will not be affected by the positioning properties of other elements.</p>
</div>
<div class="relative">
<h2>Relative Position</h2>
<p>This div has a relative position. It is positioned relative to its normal position, and it can be moved using the top, bottom, left, and right properties.</p>
</div>
<div class="absolute">
<h2>Absolute Position</h2>
<p>This div has an absolute position. It is positioned relative to the nearest positioned ancestor, which means it will be affected by the positioning properties of other elements.</p>
</div>
<div class="fixed">
<h2>Fixed Position</h2>
<p>This div has a fixed position. It is positioned relative to the viewport, which means it will stay in the same place even when scrolling.</p>
</div>
<div class="sticky">
<h2>Sticky Position</h2>
<p>This div has a sticky position. It is positioned relative to the nearest positioned ancestor, but it will not be affected by the positioning properties of other elements. It will stay in its original place until it crosses a specified threshold.</p>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: grid;
place-content: center;
min-height: 100vh;
}
.container{
width: 100%;
max-width: 1200px;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
border: 1px solid red;
gap: 20px;
padding: 20px;
}
.static{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: static;
}
.relative{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: relative;
top:30px;
right: 30px;
}
.absolute{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: absolute;
top: 30px;
right: 100px;
}
.fixed{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: fixed;
bottom: 0;
right: 0;
}
.sticky{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: sticky;
top: 0;
right: 0;
}
— Pause, Take a deep breath, and then proceed!!—
- CSS Layout
1. Flexbox: This is a one-dimensional layout method used for laying items out in a single axis (horizontally and vertically).
Features of a flexbox
-
display: flex- This creates a flexbox for the container. -
align-items: center- This controls the container's vertical alignment. -
justify-content: space-between- This controls the container's horizontal alignment. -
gap: adds spacing between flex items without needing margins.
Here's the before and after of a simple Navigation Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar using CSS Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
ul {
display: flex;
align-items: center;
gap: 2rem;
}
Result:
2. Grid: This is a 2-dimensional layout method used in creating rows and columns.
Features
-
display: grid- This creates a Grid for the container. -
grid-template-columns/grid-template-rows- This defines a row or column for the container. -
repeat(2, 1fr)- This creates 2 equal-width columns. -
gap: 10px- Adds spacing between grid items.
Here is a before and after of some cat photos i found on Unsplash.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Grid using Cat Photos</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="cat-photos">
<img src="path-to-your-image/cat-one.jpg" alt="Cute cat" />
<img src="path-to-your-image/cat-two.jpg" alt="Cute cat" />
<img src="path-to-your-image/cat-three.jpg" alt="Cute cat" />
<img src="path-to-your-image/cat-four.jpg" alt="Cute cat" />
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
.container {
margin: 0 auto;
width: 950px;
padding: 1rem;
}
.cat-photos {
padding: 2rem;
display: grid;
grid-template-columns: repeat(2, 1fr); /* Creates 2 equal-width columns */
}
img {
border: 5px solid white;
border-radius: 10px;
width: 250px;
height: 250px;
}
Result:
Comparison Table
| Feature | Flexbox | Grid |
|---|---|---|
| Axis | One-dimensional | Two-dimensional |
| Alignment | Horizontal/Vertical | Rows and columns |
| Best for | Navigation Bars | Layouts like dashboards |
| Flexibility | Better for small components | Better for page layouts |
Positioning and Layout are the foundation of CSS. Understanding when and how to use them will not only make your styling experience easier but also more enjoyable and efficient. While this article gets you started with Flexbox and Grid, I’ll soon publish a more in-depth guide exploring their advanced features, tips, and tricks. Stay tuned for that!
And that’s a wrap on Mastering CSS Basics! I hope you enjoyed reading this as much as I enjoyed writing it. But before we part ways, I’d love to hear from you:
Which CSS layout method do you prefer for your projects—Flexbox or Grid? And why?
Feel free to share your thoughts in the comments below.
Bye for now!!!!
Top comments (1)
Wow, Great article! Mastering CSS positioning and layout techniques like Flexbox and Grid is crucial for building responsive and visually appealing websites. EchoAPI can be a game-changer in automating your testing process, especially when working with CSS layouts.
Check out more about EchoAPI here: EchoAPI.