Fanny Nyayic

CSS Flexbox and Grid Layouts: Simplified for Beginners

CSS Flexbox and Grid Layouts: Simplified for Beginners

Fanny Nyayic's photo
Fanny Nyayic
·

5 min read

Cascading Style Sheets (CSS) have evolved significantly over the years, enabling web developers to create stunning layouts and designs with ease. Two powerful layout tools at your disposal are Flexbox and Grid.

What are Flexbox and Grid Layouts?

CSS Flexbox

Flexbox, or the Flexible Box Layout, is a one-dimensional layout model. It allows you to distribute space and align-items within a container, even when their sizes are unknown or dynamic. Flexbox is especially useful for creating responsive designs and arranging items in a single row or column.

CSS Grid Layout

Grid Layout, on the other hand, is a two-dimensional layout model. It is designed for arranging items in a grid with both rows and columns. Grids make it easy to create complex layouts and align items in both directions, creating a highly flexible structure for your web content.

CSS Flexbox

Understanding the Basics

Flexbox operates on two main axes: the main axis and the cross axis. The main axis is determined by the flex-direction property, which can be set to either row (default), row-reverse, column, or column-reverse. The cross-axis is perpendicular to the main axis.

Let's create a simple example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

/* styles.css */
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

In this example, the display: flex property makes the .container a flex container. The justify-content property centers the items along the main axis, and align-items centers them along the cross-axis.

Flex Properties

Flexbox introduces several properties to control the layout. Here are some essential ones:

  • flex-direction: Specifies the direction of the main axis (row, row-reverse, column, or column-reverse).

  • justify-content: Determines how items are distributed along the main axis (flex-start, flex-end, center, space-between, space-around).

  • align-items: Controls how items are aligned along the cross axis (flex-start, flex-end, center, baseline, stretch).

  • flex: Combines flex-grow, flex-shrink, and flex-basis in one property to manage item size and distribution.

Example: Responsive Navigation Menu

Flexbox excels at creating responsive navigation menus. Here's a basic example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <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>
</body>
</html>

/* styles.css */
nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  color: white;
  padding: 10px;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin: 0 10px;
}

a {
  text-decoration: none;
  color: white;
}

This creates a responsive navigation menu that evenly distributes items along the main axis, adapting to different screen sizes.

CSS Grid Layout

Understanding the Basics

CSS Grid Layout offers a two-dimensional layout system, with rows and columns. You create a grid container and define its structure with the grid-template-rows and grid-template-columns properties.

Here's a simple example:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>
</html>

/* styles.css */
.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-gap: 10px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

In this example, display: grid creates a grid container. grid-template-columns defines the columns with a width of 100px and grid-gap adds spacing between the items.

Grid Properties

Here are some essential CSS Grid properties:

  • grid-template-columns and grid-template-rows: Define the number and size of columns and rows in your grid.

  • grid-gap and grid-row-gap/grid-column-gap: Set the spacing between grid items.

  • grid-auto-flow: Determines how new items are placed in the grid (row, column, dense).

  • grid-area: Assigns a grid item to a named grid area.

Let's use CSS Grid to create a photo gallery:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="gallery">
    <div class="photo">1</div>
    <div class="photo">2</div>
    <div class="photo">3</div>
    <div class="photo">4</div>
    <div class="photo">5</div>
    <div class="photo">6</div>
  </div>
</body>
</html>

/* styles.css */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

.photo {
  width: 100%;
  height: 200px;
  background-color: lightblue;
}

Here, we're using repeat(auto-fill, minmax(200px, 1fr)) to create a responsive photo gallery, where the columns automatically adapt to the available space.

Combining Flexbox and Grid

In many cases, Flexbox and Grid can be used together to create complex layouts. For example, you can use Flexbox for the main navigation of a webpage and Grid to structure the content within sections.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
  <div class="main-content">
    <div class="sidebar">Sidebar</div>
    <div class="content">Main Content</div>
  </div>
</body>
</html>

/* styles.css */
.nav {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  color: white;
  padding: 10px;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

.sidebar {
  background-color: lightgray;
}

.content {
  background-color: lightblue;
}

In this example, we use Flexbox for the navigation and Grid for the main content. This allows for a flexible and responsive layout.

Conclusion

CSS Flexbox and Grid Layouts are essential tools for web developers to create attractive and responsive web layouts.

Flexbox simplifies the alignment and distribution of items along one axis, while Grid Layout provides a two-dimensional structure for arranging items in both rows and columns.

By understanding the basics of these layout models and experimenting with the provided examples, beginners can quickly grasp the power and flexibility that CSS Flexbox and Grid Layouts bring to web design.

So, roll up your sleeves and start experimenting with these layout techniques today!

CSSCSS GridCSS3css flexbox