The LayX Container component centers and structures content for responsive layouts, with adaptive spacing that adjusts to various screen sizes and aspect ratios. The Container also includes an optional edge-aligned grid layout for full-width content displays.
Use the container tag or .container class to create a centered layout, or add the
.edge class for layouts aligned to screen edges with
designated grid columns. Here’s an example:
<container>
<p>Content here...</p>
</container>
or
<div class="container">
<p>Content here...</p>
</div>
The container adapts spacing with custom properties for different breakpoints:
--edge-offset-x adjusts horizontal margins:The .edge class transforms the container into a grid with
three columns. Content defaults to the center column, but can span all columns with
the .full class, making it ideal for full-width elements.
<container class="edge">
<p>Content here...</p>
<div class="full">
<p>full-width content here...</p>
</div>
</container>
container, .container {
--edge-offset-x: .75rem;
display: block;
margin-inline: var(--edge-offset-x);
&.edge {
display: grid;
grid-template-columns: var(--edge-offset-x, 0px) 1fr var(--edge-offset-x, 0px);
margin-inline: unset;
& > * {
grid-column: 2;
}
& > .full {
grid-column: span 3;
}
}
@media (width >= 576px) {
--edge-offset-x: 2.5%;
}
@media (width >= 992px) {
--edge-offset-x: 5%;
}
@media (aspect-ratio >= 21/9) and (width >= 2000px) {
--edge-offset-x: 15%;
}
@media (aspect-ratio >= 32/9) and (width >= 3000px) {
--edge-offset-x: 25%;
}
}
With this flexible structure, you can easily manage responsive and edge-to-edge layouts for diverse screen configurations.