Max width with fr in grid.
Hi, I am trying to limit breakout in the grid to a amx width but would like to retain ints atributes with fr. How can I do that?
// Grid
.content,
.full,
.breakout {
--gap: clamp(1rem, 6vw, 3rem);
--full: minmax(0, 1fr);
// --full: calc((100vw - #{$max-width}) / 4);
--breakout: minmax(calc((100vw - #{$max-width}) / 4), #{$max-br-width});
// --breakout: clamp(0, 1fr, $max-br-width);
--content: clamp(
5ch,
45vw,
min(#{$max-width} / 2, 65ch)
); //clamp(25ch, 45vw, 65ch)
display: grid;
grid-template-columns:
[full-start] var(--full)
[breakout-start] var(--breakout)
[content-start left-start] var(--content)
[split left-end right-start] var(--content)
[content-end right-end] var(--breakout)
[breakout-end]var(--full)
[full-end];
@include media("<=medium") {
--breakout: 0;
}
}
.content > *,
.full > * {
grid-column: content;
margin: 0; //TODO: Revisit
}
.breakout > * {
grid-column: breakout;
}
.breakout {
grid-column: full;
}
.full {
grid-column: full;
}
.left {
grid-column: left;
@include media("<=medium") {
grid-column: content;
}
}
.right {
grid-column: right;
@include media("<=medium") {
grid-column: content;
}
}
.split {
grid-column: split;
}
// Grid
.content,
.full,
.breakout {
--gap: clamp(1rem, 6vw, 3rem);
--full: minmax(0, 1fr);
// --full: calc((100vw - #{$max-width}) / 4);
--breakout: minmax(calc((100vw - #{$max-width}) / 4), #{$max-br-width});
// --breakout: clamp(0, 1fr, $max-br-width);
--content: clamp(
5ch,
45vw,
min(#{$max-width} / 2, 65ch)
); //clamp(25ch, 45vw, 65ch)
display: grid;
grid-template-columns:
[full-start] var(--full)
[breakout-start] var(--breakout)
[content-start left-start] var(--content)
[split left-end right-start] var(--content)
[content-end right-end] var(--breakout)
[breakout-end]var(--full)
[full-end];
@include media("<=medium") {
--breakout: 0;
}
}
.content > *,
.full > * {
grid-column: content;
margin: 0; //TODO: Revisit
}
.breakout > * {
grid-column: breakout;
}
.breakout {
grid-column: full;
}
.full {
grid-column: full;
}
.left {
grid-column: left;
@include media("<=medium") {
grid-column: content;
}
}
.right {
grid-column: right;
@include media("<=medium") {
grid-column: content;
}
}
.split {
grid-column: split;
}
0 Replies