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

How can I adjust cell height in an HTML grid?

I used a box-shadow to add some depth to the buttons as you can see below, however it ‘bleeds’ through the gap, and makes the spacing uneven.

enter image description here

Initially, I tried to change the grid-template-rows to account for this:

grid-template-rows: calc(1fr - 10px) calc(1fr - 10px);

but it didn’t seem to do anything.

Minimum code example:

.cont {
    display: grid;
    padding: 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
    width: 250px;
    height: 250px;
    background: black;
}

.cont>div {
    background: rgb(206, 34, 34);
    box-shadow: 0 10px 0 rgb(160, 25, 25);
}
<div class="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
Tags:

2

Answers


  1. 0

    I was curious how Chatgpt would answer this. This is just for your interest- here is what it gave me, no offense meant but-

    To adjust the height of cells in a CSS grid, you can use the grid-template-rows property or the grid-auto-rows property. Here’s how you can use each property:

    grid-template-rows property: Use this property when you want to define the height of specific rows in the grid explicitly. You can specify the height of each row individually or use the repeat() function to set a pattern for row heights.

    css

    .grid-container {
  display: grid;
  grid-template-rows: 100px 200px 50px; /* Example: Setting specific row heights */
}

    In the example above, the .grid-container represents the container element of the grid. The grid-template-rows property sets the height of each row in the grid explicitly. You can adjust the pixel values according to your requirements.

    grid-auto-rows property: Use this property when you want the grid to automatically adjust the height of rows based on their content. This property is useful when you have variable content heights or you want the rows to expand or shrink dynamically.

    css

    .grid-container {
  display: grid;
  grid-auto-rows: 100px; /* Example: Setting a default row height */
}

    In the example above, the .grid-container represents the container element of the grid. The grid-auto-rows property sets a default height for all rows in the grid. The rows will expand or shrink based on their content, but they will not exceed or be smaller than the specified height of 100 pixels.

    Remember to adjust the CSS selector (.grid-container) based on the class or ID of your grid container element.

    These properties allow you to control the height of the cells (rows) within a CSS grid. You can specify the height values using pixel (px), percentage (%), or other length units supported by CSS.

    Login or Signup to reply.
  2. 0

    You could set the row gap and column gap separately:

    .cont {
    display: grid;
    padding: 20px 20px 30px 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 30px;
    column-gap: 20px;
    width: 250px;
    height: 250px;
    background: black;
}

.cont>div {
    background: rgb(206, 34, 34);
    box-shadow: 0 10px 0 rgb(160, 25, 25);
}
    <div class="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search