10Modern Layout Techniques
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.
/* 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.
/* 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.
/* 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`.
<!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>