英文:
Make CSS grid take up 1 row of another (separate) overlapping CSS grid
问题
I have a layout where a text introduction is inline with the first product grid item. Then rest of the product grid should then wrap below.
然后，其余的产品网格应该在下方换行。
However, on mobile I need these items to be separate as the introduction needs to be above the product grid - which scrolls horizontally in an accordion. So the product 'cards' are wrapped in a div to contain them.
然而，在移动设备上，我需要将这些项目分开，因为介绍需要位于产品网格之上 - 该产品网格在手风琴中水平滚动。因此，产品 '卡片' 被包裹在一个 div 中以包含它们。
I have the majority of this working in my example, however the intro spans 2 rows of the grid (and more when more product rows are added), so if the text is longer it would go behind the project cards.
在我的示例中，我已经完成了大部分工作，但是介绍跨越了网格的2行（当添加更多产品行时会更多），因此如果文本较长，它会进入项目卡片的后面。
So how do I limit that grid to just taking up 1 row of the product grid? Is it possible with only CSS?
那么，如何将该网格限制为仅占据产品网格的1行？只使用CSS是否可能？
You'll need to view the example on a wider (800px+) viewport to see the desktop layout.
您需要在更宽的（800px+）视口上查看示例以查看桌面布局。
英文:
I have a layout where a text introduction is inline with the first product grid item. Then rest of the product grid should then wrap below.
However, on mobile I need these items to be separate as the introduction needs to be above the product grid - which scrolls horizontally in an accordion. So the product 'cards' are wrapped in a div to contain them.
I have the majority of this working in my example, however the intro spans 2 rows of the grid (and more when more product rows are added), so if the text is longer it would go behind the project cards.
So how do I limit that grid to just taking up 1 row of the product grid? Is it possible with only CSS?
You'll need to view the example on a wider (800px+) viewport to see the desktop layout.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background: #eee;
}
.products {
margin: 64px 32px;
}
.products__grid {
display: flex;
flex-wrap: nowrap;
column-gap: 4px;
margin: 0 -32px;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-padding-left: 32px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.product-card {
background-color: white;
box-sizing: border-box;
display: flex;
flex-shrink: 0;
flex-direction: column;
padding: 32px 32px 64px;
width: 100%;
max-width: 100%;
}
.product-card__title {
color: black;
display: flex;
font-size: 1rem;
padding: 0 32px;
}
.product-card--story {
background-color: transparent;
justify-content: center;
padding: 0 32px;
text-align: center;
}
@media only screen and (min-width: 800px) {
.products {
display: grid;
column-gap: 4px;
margin: 64px 32px 64px;
grid-template-columns: repeat(12, 1fr);
}
.products__desc {
background: rgba(255, 0, 0, .24);
grid-column: 2 / span 4;
grid-row: 1;
}
.products__grid {
display: grid;
column-gap: 4px;
row-gap: 4px;
grid-template-columns: repeat(12, 1fr);
grid-row: 1;
grid-column: 1 / span 12;
margin: 0;
}
.product-card {
grid-column: span 4;
&:first-child {
grid-column: 9 / span 4;
}
}
.product-card__title {
color: black;
display: flex;
font-size: 1rem;
padding: 0 32px;
}
.product-card--story {
background-color: transparent;
justify-content: center;
padding: 0 32px;
text-align: center;
}
}
<!-- language: lang-html -->
<div class="products">
<div class="products__desc">
<h2>Title of the Block</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
<li>Lorem ipsum dolor</li>
</ul>
</div>
<div class="products__grid">
<a href="#" class="product-card">
<h3 class="product-card__title">Title of Product #1</h3>
<img src="https://images.pexels.com/photos/13446290/pexels-photo-13446290.jpeg" alt="ALT TEXT" class="product-card__image">
</a>
<a href="#" class="product-card">
<h3 class="product-card__title">Title of Product #2</h3>
<img src="https://images.pexels.com/photos/13446290/pexels-photo-13446290.jpeg" alt="ALT TEXT" class="product-card__image">
</a>
<a href="#" class="product-card">
<h3 class="product-card__title">Title of Product #3</h3>
<img src="https://images.pexels.com/photos/13446290/pexels-photo-13446290.jpeg" alt="ALT TEXT" class="product-card__image">
</a>
<div class="product-card product-card--story">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
这可能有更加优雅的方法来实现，但问题似乎是要将项目从滚动网格中移出并放入主网格中。不确定是否可能。所以我的解决方法相当简单：复制第一个产品，在移动设备上隐藏顶部的产品，并在桌面上将其隐藏在滚动区域中。
另一种选择是，在不复制内容的情况下，通过将第一个产品定位为绝对定位，将其从滚动区域中移出。不过这样做有其缺点，因为您需要根据产品的内容块大小设置描述的宽度和高度，否则您的第一个产品会与描述重叠。
英文:
There might be a more elegant way to do this, but the problem seems to be breaking out of the scroller grid and place the item into the main grid. Not sure if thats possible. So my workaround is quite simple: double the first product, hide up the top one on mobile and hide it in the scroller on desktop.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.description {
background: red;
padding: 24px;
box-sizing: border-box;
}
.scroller {
background: yellow;
overflow-x: scroll;
display: flex;
flex-wrap: nowrap;
gap: 12px;
max-width: 100%;
}
.product {
display: inline-block;
width: 400px;
height: 400px;
box-sizing: border-box;
padding: 24px;
background: cyan;
flex-shrink: 0;
}
.products > .first {
display: none;
}
.first {
background: greenyellow;
}
@media screen and (min-width: 800px) {
.products {
display: grid;
grid-template-areas:
"a b"
"c c";
grid-template-columns: auto 400px;
gap: 12px;
}
.description {
grid-area: a;
height: 400px;
}
.products > .first {
grid-area: b;
display: block;
background: pink;
}
.scroller {
grid-area: c;
}
}
<!-- language: lang-html -->
<div class="products">
<div class="description">Description</div>
<div class="product first">product 1a</div>
<div class="scroller">
<div class="product first">product 1b</div>
<div class="product">product 2</div>
<div class="product">product 3</div>
<div class="product">product 4</div>
<div class="product">product 5</div>
<div class="product">product 6</div>
<div class="product">product 7</div>
<div class="product">product 8</div>
</div>
</div>
<!-- end snippet -->
Another option - without doubling content - is to pull the first product out of the scroller by positioning it absolute. This has its drawbacks though as you need to set the description width and height relative to the size of the content block of the product, otherwise your first product will overlap with the description.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.description {
background: red;
padding: 24px;
box-sizing: border-box;
}
.scroller {
background: yellow;
overflow-x: scroll;
display: flex;
flex-wrap: nowrap;
gap: 12px;
}
.product {
display: inline-block;
width: 400px;
height: 400px;
box-sizing: border-box;
padding: 24px;
background: cyan;
flex-shrink: 0;
}
.first {
background: greenyellow;
}
@media screen and (min-width: 800px) {
.products {
position: relative;
}
.description {
grid-area: a;
height: 400px;
}
.first {
position: absolute;
top: 0;
right: 0;
background: pink;
}
}
<!-- language: lang-html -->
<div class="products">
<div class="description">Description</div>
<div class="scroller">
<div class="product first">product 1</div>
<div class="product">product 2</div>
<div class="product">product 3</div>
<div class="product">product 4</div>
<div class="product">product 5</div>
<div class="product">product 6</div>
<div class="product">product 7</div>
<div class="product">product 8</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论