10. Modern Layout Techniques

Level: AdvancedDuration: 40m

CSS Logical Properties

Logical properties allow you to write CSS that adapts to different writing modes and directions, making layouts more flexible for internationalization and modern designs.

css

/* Margin and padding using logical properties */
div.container {
  margin-inline-start: 20px; /* replaces margin-left */
  margin-inline-end: 20px;   /* replaces margin-right */
  padding-block-start: 10px; /* replaces padding-top */
  padding-block-end: 10px;   /* replaces padding-bottom */
}

/* Inset for positioning */
div.box {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 20px;
}

Logical properties replace physical properties like `top`, `left`, `right`, and `bottom`, making your layout responsive to writing modes (e.g., left-to-right, right-to-left, vertical).

Container Queries

Container queries let components respond to the size of their parent container instead of the viewport. This enables truly modular, responsive design where components adapt independently.

css

/* Container setup */
div.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Container query */
@container card (min-width: 400px) {
  div.card {
    display: flex;
    flex-direction: row;
  }
}

@container card (max-width: 399px) {
  div.card {
    display: flex;
    flex-direction: column;
  }
}

With container queries, you can create responsive components that work well in multiple layouts without relying solely on viewport breakpoints.

Aspect Ratio & Object Fit

Modern CSS includes tools to maintain consistent aspect ratios for elements and control how media like images or videos fit within a container.

css

/* Aspect ratio */
div.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #000;
}

/* Object fit and position */
img.responsive {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* fill, contain, cover, scale-down */
  object-position: center center;
}

Using `aspect-ratio` ensures elements maintain proportional sizing, while `object-fit` and `object-position` give precise control over how media fills their containers.

Mini Project Step

Build a responsive card grid where each card adapts to its container’s width using container queries. Use logical properties for padding/margin and ensure images inside the cards maintain a 16:9 aspect ratio using `aspect-ratio` and `object-fit`.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern Layout Cards</title>
<style>
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  container-type: inline-size;
  container-name: card;
}
.card {
  background: #3498db;
  color: white;
  padding: 1rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 5px;
}
@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    gap: 10px;
  }
}
</style>
</head>
<body>
<div class="card-container">
  <div class="card">
    <img src="https://via.placeholder.com/400x225" alt="Example">
    <div>
      <h3>Card Title</h3>
      <p>Responsive content that adapts to container width.</p>
    </div>
  </div>
</div>
</body>
</html>

MDN CSS Logical Properties

MDN Container Queries Guide

Page

CSS Logical Properties

Container Queries

Aspect Ratio & Object Fit

Mini Project Step