CSS using flexbox, CSS Variables for Theming and CSS Grid for complex layouts

CSS PRO TIPS

2 min readMar 24, 2023

Here are some CSS pro tips with examples:

Use Flexbox for layout

Flexbox is a powerful CSS layout system that makes it easy to create flexible and responsive layouts. Here’s an example of using Flexbox to create a horizontal navigation menu:

HTML:

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  margin: 0 10px;
}

In this example, we’re using the display: flex property on the nav element to create a flex container. We’re using justify-content: space-between to distribute the child elements evenly along the main axis, and align-items: center to center the child elements along the cross axis. Finally, we’re using a margin on the nav a elements to create spacing between them.2. Use CSS Variables for Theming

CSS variables are a powerful way to create reusable styles that can be easily customized. Here’s an example of using CSS variables to create a dark theme:

HTML:

<body class="dark-theme">
  <h1>Hello World</h1>
</body>

CSS:

:root {
  --background-color: #222;
  --text-color: #fff;
}

.dark-theme {
  --background-color: #111;
  --text-color: #ccc;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

In this example, we’re defining two CSS variables in the :root selector: — background-color and — text-color. We’re then using these variables to define the background color and text color for the body element. Finally, we’re using the .dark-theme class to override the default variable values and create a dark theme.

3. Use CSS Grid for complex layouts

CSS Grid is another powerful CSS layout system that allows you to create complex grid-based layouts. Here’s an example of using CSS Grid to create a 3-column layout:

HTML:

<div class="grid-container">
  <div class="grid-item">Column 1</div>
  <div class="grid-item">Column 2</div>
  <div class="grid-item">Column 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
}

In this example, we’re using the display: grid property on the .grid-container element to create a grid container. We’re using grid-template-columns: repeat(3, 1fr) to create a 3-column grid, and grid-gap: 10px to add some spacing between the grid items. Finally, we’re using the .grid-item class to define the background color and padding for each grid item.

CSS PRO TIPS

Written by Rahul Kaklotar