CSS grid-template-areas is awesome

Lars — Sun, 21 Sep 2025 15:32:34 +0000

The CSS grid-template-areas is my favorite CSS property and I'd like to devote this short article to it.

Let's jump right in.

How it works

grid-template-areas is used as part of the CSS grid layout system. Before you can use it, you have to initialize a grid container with display: grid; and then you can use grid-template-areas to specify the layout you want.

<body>
  <div class="grid">
    <div class="grid-item grid-item-1" style="background-color: lightcoral;">Head</div>
    <div class="grid-item grid-item-2" style="background-color: lightblue;">Main</div>
    <div class="grid-item grid-item-3" style="background-color: lightgreen;">Aside</div>
    <div class="grid-item grid-item-4" style="background-color: lightyellow;">Foot</div>
</body>

.grid {
  height: 100vh;
  display: grid;
  grid-template-areas: 
    'head head head'
    'main main aside'
    'foot foot foot';

This simple example creates a 3x3 grid with the top row consisting of only the header. 2/3 of the middle row is occupied by main and 1/3 is occupied by aside. Finally, the footer spans the entire width.

See how easy it is to read and understand this?

Making it reponsive

You can use media queries to effortlessly set a different layout structure at the breakpoints you want.

@media (max-width: 768px) {
  .grid {
    grid-template-areas: 
      'head'
      'main'
      'aside'
      'foot';
  }
}

At this point, on devices less than or equal to 768px the areas are stacked on top of each other.

Pretty cool, right?

Conclusion

I love that this is so readable and maintainable.

How to manage venvs in Python

Lars — Thu, 18 Sep 2025 05:12:25 +0000

I'd like to share with you from my own docs a reference about managing virtual environments in Python.

Create venv

python3 -m venv myvenv

Activate venv

source myvenv/bin/activate

Install from requirements.txt

After you activate run

pip3 install -r requirements.txt

Delete venv

deactivate
rm -r myvenv

Freeze into requirements.txt

After venv is activated

python3 -m pip freeze > requirements.txt

DEV Community: Lars