Ten Modern Layouts 🚀 [Part 3]

This is the third part and final of the "Ten Modern Layouts"
If you aren't read the part 1, here you can read it.
If you aren't read the part 2, here you can read it.

#7 RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(, 1fr))

In this seventh example, we'll take what we've learned about creating flexible layouts and add automatic placement of child elements. The result will be a responsive layout that adapts to different screen sizes and device orientations.

To achieve this, we'll use a combination of CSS grid properties such as "repeat", "auto-fit" or "auto-fill", and "minmax()". These properties will allow us to define a flexible grid that automatically adjusts to the available space and distributes the child elements evenly. We can remember these properties using the acronym RAM, which stands for Repeat, Auto-fit/fill, and Minmax.

The key advantage of this approach is that it saves us from having to manually calculate and set the size and position of each child element. Instead, we let the grid handle the layout, which makes it easier to maintain and update in the future.

HTML

<div class="parent">
      <div class="child-1">My div 1</div>
      <div class="child-2">My div 2</div>
      <div class="child-3">My div 3</div>
      <div class="child-4">My div 4</div>
</div>

CSS

 .parent {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.child-1 {
  display: grid;
  place-items: center;
  background: papayawhip;
}

.child-2 {
  display: grid;
  place-items: center;
  background: blueviolet;
}

.child-3 {
  display: grid;
  place-items: center;
  background: greenyellow;
}

.child-4 {
  display: grid;
  place-items: center;
  background: whitesmoke;
}

#8 Line Up: justify-content: space-between

In the next layout example, we'll use the CSS property justify-content: space-between to position child elements in a Flexbox container. This property distributes the remaining space between the first and last elements of the container, while keeping them anchored to the edges of the box. The middle elements are then spaced evenly between the endpoints.

We'll apply this technique to a set of cards that contain a title, a description, and an image block, arranged in a vertical column using the flex-direction: column property. This will create a visually pleasing layout where the title and image block are aligned with the top and bottom of the card, and the description is centered in between.

By mastering this technique, you can create elegant and dynamic layouts that adapt to different screen sizes and orientations. Try experimenting with different values and settings to see how they affect the positioning and spacing of your child elements.

HTML

<div class="parent">
      <div class="card">
        <h1>Card 1</h1>
        <p>This is a medium description.Share it.</p>
        <div class="visual"></div>
      </div>
      <div class="card">
        <h1>Card 2</h1>
        <p>
          This is a long description, thanks for read this post.
        </p>
        <div class="visual"></div>
      </div>
      <div class="card">
        <h1>Card 3</h1>
        <p>This is a short description</p>
        <div class="visual"></div>
      </div>
    </div>

CSS

 .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: papayawhip;
  padding: 1rem;
}

.visual {
  height: 100px;
  width: 100%;
  background: paleturquoise;
  margin: 0.5rem 0;
}

#9 Clamping My Style: clamp(< min >, < actual >, < max >)

In this example, we'll use the CSS function clamp() to set a range of sizes for an element, including a minimum and maximum value, as well as an actual size. This technique allows us to create more flexible and readable layouts that adapt to different screen sizes and device resolutions.

For instance, we can use the clamp() function to set the width of an element to 50% of its parent, with a minimum of 23 character units and a maximum of 46 character units. This means that the element will stay centered in its parent and won't become too narrow or too wide, regardless of the viewport size.

We can also use clamp() to set the font-size of text elements, such as headlines, to a range of values that scale with the viewport width. This way, the text will be readable on all devices, whether it's a small phone screen or a large desktop monitor.

It's worth noting that the clamp() function is not supported in all modern browsers, so it's important to have fallback options and test your layout on different devices and browsers. Nonetheless, it's a powerful and versatile tool that can help you create more responsive and legible designs.

HTML

 <div class="parent">
      <div class="card">
        <h1>Card</h1>
        <div class="visual"></div>
        <p>
          This is a description.
        </p>
        <br />
        <p>
          This is the content of the card. Here you can write a lot of text as
          you want.
        </p>
      </div>
    </div>

CSS

 .parent {
  display: grid;
  place-items: center;
  height: 100vh;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: papayawhip;
  padding: 1rem;
  width: clamp(23ch, 50%, 46ch);
}

.visual {
  height: 100px;
  width: 100%;
  background: paleturquoise;
  margin: 0.5rem 0;
}

#10 Respect for Aspect: aspect-ratio: < width > / < height >

Maintaining the aspect ratio of images and videos can be a challenge in web development, especially when dealing with responsive layouts. But there's a new CSS property called aspect-ratio that simplifies this task by letting you specify the desired aspect ratio of an element, such as 16:9 or 1:1, and allowing the browser to automatically adjust its size and shape accordingly.

This property is particularly useful for videos and iframes, where preserving the original aspect ratio is critical. Previously, developers had to resort to padding hacks and complex calculations to achieve the same effect. But with aspect-ratio, you can achieve a similar result with much less code and hassle.

HTML

 <div class="parent">
      <div class="card">
        <h1>Card</h1>
        <div class="visual"></div>
        <p>
          This is the description
        </p>
      </div>
    </div>

CSS

.parent {
  display: grid;
  place-items: center;
  height: 100vh;
}
.card {
  width: 80%;
  display: flex;
  flex-direction: column;
  background: lightblue;
  padding: 1rem;
}

.visual {
  aspect-ratio: 16/9;
  background: lightcoral;
  margin: 0.5rem 0;
}