Question 342509 in Html Question posted in
Some basic documentation can be found here.

Html – In CSS grid, how can I make each column be 1/3 (min) and 1/2 (max) depending on how many columns there are?

Let’s say I have a container with display: grid. I want to make sure that each column takes up the following widths depending on how many columns there are:

  • If 2 or less, each column takes up 1/2.
  • If greater than 2, each column takes up 1/3

I have the following code so far:

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
    gap: 8px;
  border: 1px solid black;
  padding: 8px;
}

.column {
  grid-column: span 4 / span 4;
  border: 1px solid red;
  padding: 8px;
}
<div class="container">
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>

It works for the most part, as in it takes care of the most common use case where each column takes up 1/3 width. But I would love to make this dynamic based on the number of columns present. Is there a way to do this?

Tags:

2

Answers


  1. 0

    To achieve the desired layout where each column takes up 1/2 of the container’s width when there are 2 or fewer columns, and each column takes up 1/3 of the container’s width when there are more than 2 columns, you can use CSS Grid and media queries. Here’s how you can modify your code:

    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Initial setup for 2 columns */
        gap: 8px;
        border: 1px solid black;
        padding: 8px;
      }

    @media (min-width: 600px) { /* Adjust for more than 2 columns at a breakpoint */
        .container {
          grid-template-columns: repeat(3, 1fr);
        }
    }

    .column {
        border: 1px solid red;
        padding: 8px;
      }
        <div class="container">
      <div class="column">Column</div>
      <div class="column">Column</div>
      <div class="column">Column</div>
    </div>
    Login or Signup to reply.
  2. 0

    Yes, this is possible (based on this SO Q&A)

    Note that, in CSS3, styles cannot be applied to a parent node based on the number of children it has. However, styles can be applied to the children nodes based on the number of siblings they have.

    .container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  border: 1px solid black;
  padding: .25em;
  margin-bottom: 1em;
}

.column {
  border: 1px solid red;
  padding: 8px;
  grid-column: span 4;
  background: goldenrod;
  font-weight: bold;
}


/* two items */

.column:first-child:nth-last-child(2),
.column:first-child:nth-last-child(2)~.column {
  grid-column: span 6;
}
    <div class="container">
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>

<div class="container">
  <div class="column">Column</div>
  <div class="column">Column</div>

</div>

<div class="container">
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search