search

Home  >  Q&A  >  body text

CSS Grid Layout Square Cells

<p>I want to create a dashboard-like view using CSS Grid-Layout as a base. I want 16 columns spread across the entire length of the screen (should be responsive). The height of the cell should then be determined by the width of the cell to make the cell a square. The problem is, I want some cells to span multiple cells. For example, I want an element that takes up 2x1 cells. </p> <p>So I have a basic grid layout: </p> <pre class="brush:php;toolbar:false;">.grid-container { display: grid; grid-template-columns: repeat(16, 1fr); grid-auto-rows: var(--tile-unit); gap: var(--tile-gap); align-content: start; } .grid-item { background: light-gray; border-radius: 10px; }</pre> <p>There are also classes for elements that span multiple columns or rows: </p> <pre class="brush:php;toolbar:false;">.width-unit-2 { grid-column-end: span 2; } .height-unit-2 { grid-row-end: span 2; }</pre> <p>Now I try to use the aspect ratio of the element. This works fine for a 2x1 element, but if I want a 2x2 element I can't just define the aspect ratio in the corresponding class, I need to define a separate class for this case. </p> <p>Is there a way to make grid cells square without using <code>aspect-ratio</code>? </p>
P粉593536104P粉593536104497 days ago503

reply all(1)I'll reply

  • P粉276064178

    P粉2760641782023-08-16 10:27:57

    The aspect-ratio of this square is actually 1x1, and then CSS sets its size## based on height or width #

    reply
    0
  • Cancelreply