10Modern Layout Techniques

Advanced40m

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