html - CSS Grid with horizontal scrolling rows - Stack Overflow

admin管理员组

文章数量:1387404

I am building an app comprised of "cards" that are generated from an external database, primarily using vue.js' composition API. Each card is laid out in a CSS grid. Some cards are "grouped" together, and all group members are contained in a bounding box. This is what it looks like right now:

Here's a rough mockup of what the components boil down to:

<div class="wrapper">
  <div class="group">
    <div class="card a">A</div>
    <div class="card b">B</div>
    <div class="card c">C</div>
    <div class="card d">D</div>
  </div>
  <div class="card e">E</div>
  <div class="card f">F</div>
  <div class="card g">G</div>
</div>

Here's the CSS for each component:

The "master grid":

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
  gap: var(--space-small);
}

The "cards":

.card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto 1fr auto auto;
  gap: calc(var(--space-small)/2);
}

The "groups" of cards:

.group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
  gap: var(--space-small);
  padding: var(--space-small);
}

Here's a JSFiddle: /

I'm trying to modify these groups so that (in order of priority): a) they do not break, and instead groups of 4 or more populate sideways and the user can scroll horizontally through them, and... b) they stay the same size as the ungrouped cards.

Ideally, it would look like so:

I tried using grid-auto-flow and grid-auto-columns, which worked for the most part, but broke on mobile.

body {
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
  grid-gap: 10px;
}

.group {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
  gap: 10px;
  background-color: grey;
  padding: 10px;
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

<div class="wrapper">
  <div class="group">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
  </div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
</div>

本文标签： htmlCSS Grid with horizontal scrolling rowsStack Overflow