Нужна помощь в выравнивании элемента Flex-Box в колонку сетки или альтернативное решение ⇐ Html

[Anonymous]

У меня есть сетка сетки: [полная ширина] [Breakout] [Content] [Breakout] [полная ширина] . Тем не менее, это скрывает/закрепляет содержание под левыми столбцами при прокрутке. выше. Я хотел бы избежать использования текущего Spacer Div, который я использую в Flexbox, или оценивать наилучшую маржу/прокладку, чтобы избежать потенциального смещения. class = "Snippet-Code">

Код: Выделить всё

// I want this first card to be left-aligned to the above  & .

// The emoji,  &  are in a grid.   &  in [content] column.

// If I insert the cards into the [content] column, they clip and scroll under the column to the left.

// To avoid this, I put them at full-width, but I’m trying to align them to the [content] column with a spacer div to the left.

// I’d like to avoid this or adding a margin/padding to the left due to responsiveness and potential misalignment on different screen sizes.< /code>
/* -------------------------- Global Styles & Reset ------------------------- */
:root {
--color-background: rgba(155, 215, 255, 0.5);
--color-main: #60935d;
--color-accent: #fdca40;
--color-accent-hover: #ffd256;
--color-black: rgb(34, 32, 33);
--color-blackdata: 34, 32, 33;
--color-white: #fff;
--spacing-unit: 1rem;
--margin-xxs: calc(var(--spacing-unit) / 4);
--margin-xs: calc(var(--spacing-unit) / 2);
--margin-s: var(--spacing-unit);
--margin-m: calc(var(--spacing-unit) * 2);
--margin-l: calc(var(--spacing-unit) * 3);
--margin-xl: calc(var(--spacing-unit) * 4);
--margin-xxl: calc(var(--spacing-unit) * 7);
--borderrad: 25px;
}
* {
outline: solid red 1px;
}
body {
margin: 0;
padding: 0;
background: linear-gradient(
to bottom,
rgba(155, 215, 255, 0.5) 0%,
rgba(240, 249, 255, 0.5) 100%
);
overflow-x: hidden;
}

*, *:before, *:after {
box-sizing: border-box;
}

* {
margin: 0;
}

/* ------------------------------ Size & Layout ----------------------------- */
.section {
width: 100%;
}
.container {
width: 100%;
}
/* Body Grid Layout */
.content-grid {
display: grid;
grid-template-columns: [full-width-start] var(--margin-l) [breakout-start] var(--margin-xxl) [content-start] 1fr [content-end] var(--margin-xxl) [breakout-end] var(--margin-l) [full-width-end];
position: relative;
}
.content-grid > * {
grid-column: content;
}
.content-grid > .breakout {
grid-column: breakout;
}
.full-width >  * {
grid-column: full-width;
}

/* --------------------------------- Header --------------------------------- */
.header-tag {
font: var(--h2-font);
transition: transform .5s ease;
line-height: 1;
grid-column: breakout-start;
align-self: start;
justify-self: center;
}

.header-title {
color: var(--color-black);
position: relative;
padding-bottom: 0.25rem;
display: inline-block;
}

.section-header .content-grid {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--margin-s);
margin-bottom: var(--margin-m);
}

.header-text {
grid-column: content-start;
}

.highlight-section, .container, .section-header, .content-grid {
overflow: visible;
}

.media-scroller {
display: flex;
gap: var(--margin-m);
overflow-x: auto;
overflow-y: visible;
position: relative;
z-index: 1;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--margin-xxl);
padding-block: var(--margin-m);
grid-column: full-width;
}

/* --------------------------- Summer Menu Scroll --------------------------- */
.scroll-spacer {
flex: 0 0 var(--margin-xxl);
pointer-events: none;
}

.highlight-card {
flex: 0 0 auto;
scroll-snap-align: start;
width: 20%;
aspect-ratio: 4 / 5;
height: auto;
background: var(--color-white);
border-radius: var(--borderrad);
padding: var(--margin-m);
box-shadow: 0 4px 8px rgba(var(--color-blackdata), 0.1);
transition: 200ms ease-in-out;
}

.highlight-card:hover {
transform: translateY(-2px) scale(1.015);
transition: 200ms ease-in-out;
box-shadow: 4px 8px 20px rgba(var(--color-blackdata), 0.25);
position: relative;
z-index: 25;
}< /code>



❤️

Our Specialties

Check out what we've been brewing up this summer!




Frozen Espresso is back!




Chai Watermelon
Seedless and sweet, perfect for the summer season!




Blueberry Brewed Tea
Flavorful &  fresh, picked from local farms.




Tiramisu Frappe
Sip down a sweet and savory treat!




NEW! Acai Bowls
New Acai Bowls made in house daily.





d="M17 3.34a10 10 0 1 1 -14.995 8.984L2 12l0.005 -0.324A10 10 0 0 1 17 3.34zM15 8H9l-0.117 0.007A1 1 0 0 0 8 9l0.007 0.117A1 1 0 0 0 9 10h3.584l-4.291 4.293 -0.083 0.094a1 1 0 0 0 1.497 1.32L14 11.414V15l0.007 0.117A1 1 0 0 0 16 15V9l-0.007 -0.117 -0.029 -0.149 -0.035 -0.105 -0.054 -0.113 -0.071 -0.111a1.01 1.01 0 0 0 -0.097 -0.112l-0.09 -0.08 -0.096 -0.067 -0.098 -0.052 -0.11 -0.044 -0.112 -0.03 -0.126 -0.017L15 8z"
stroke-width="1">



And a whole lot more!
Visit the shop and see what else we're brewing!

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-solution