CSS Grid expands the item width on its own when there is still space left

Question

CSS Grid expands the item width on its own when there is still space left

Having some queries regarding the piece of code provided. Currently, I have a collection of 5 cards displayed in rows of 3 cards each using the styling

grid-template-columns: repeat(3, minmax(200px, 1fr));

. My concern is whether there is a way for the 4th and 5th divs, which represent the remaining two cards, to take up the entire width of their respective rows while equally dividing the remaining space between them. Additionally, if only one card is left, should it occupy the full width of the row? I know we can target these using nth-of-type, but what if the cards are fetched from an API where the specific div numbers aren't known?

body {
  max-width: 1440px;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 1rem;
}

.card {
  height: 250px;
  background-color: orange;
}

<body>
<div class = "card"></div>
<div class = "card"></div>
<div class = "card"></div>
<div class = "card"></div>
<div class = "card"></div>
</body>

The desired output appearance is similar to this image: https://i.sstatic.net/UGoPw.png

javascript html css

Answer 1

Answer №1

Do you need a layout structured like this?

body, html {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.box {
  flex: 1;
  background-color: orange;
  margin: 0.5rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="row">
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</body>

Answer 2

Do you need a layout structured like this?

body, html {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.box {
  flex: 1;
  background-color: orange;
  margin: 0.5rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="row">
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</body>

CSS Grid expands the item width on its own when there is still space left

Answer №1

Similar questions

Tips for utilizing jQuery or AJAX to automatically update a div every 10 seconds

Leveraging ASCII characters within the .htaccess file

Modify the events JSON URL when the Full Calendar changes its display period

Implementing Vuejs Array Push in Separate Components

Using Ajax for submitting forms with jquery and html techniques

Pagination in Datatables

The scrollable dialogue disrupts the background's ability to flex and grow

Tips for streamlining the use of hidden and visible div elements with concise code

What is the best way to input data into the verified full name box?

Having trouble retrieving the accurate count of buttons with a particular class identifier

Adjusting ng-required in AngularJS for both empty values and -1

I'm wondering how I can design a utility function within my Redux module that can extract a specific subset of read-only data from the current state

Tips for choosing an item in a multi-select dropdown using Selenium WebDriver

Attempting to upload an item using ThreeJs

The dichotomy between public and private methods within a Vue.js component

"Troubleshooting: The Dropzone js code sample from the documentation

AngularJS does not recognize a dynamically created array when using ng-include with ng-repeat

Implementing Multiple HTML Files Loading in QUnit

Prevent selection of future dates in HTML input using PHP exclusively

Searching for all choices within a select dropdown using Selenium and Python