CODEWITHSUNDEEP
htmlcsscss-grid
EMILO
EMILO

Reputation: 473

Change CSS Grid vertical gap between rows

How do I change the vertical gap in between each grid row?

enter image description here

I have tried with grid-gap, but that only changes the horizontal gap—not vertical. Any help would be appreciated.

.wrapper {
  background-color: #1c1c1c;
  border: solid black 1px;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'header header header header header' 'menu content content content content' 'menu content content content content' 'footer footer footer footer footer';
}

.header {
  grid-area: header;
  border: solid white 1px;
  background-color: #3a3a3a;
  margin: 10px;
}

.menu {
  grid-area: menu;
  border: solid white 1px;
  background-color: #3a3a3a;
  margin: 10px;
}

.content {
  grid-area: content;
  border: solid white 1px;
  background-color: #3a3a3a;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  overflow-y: scroll;
}

.footer {
  grid-area: footer;
  border: solid white 1px;
  background-color: #3a3a3a;
  margin: 10px;
}

.menu-item {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border: solid white 1px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.madeby {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.content {
  list-style: none;
  grid-area: content;
  margin: 10px;
  padding: 10px;
  background-color: #3a3a3a;
}

.top {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.cell {
  border: solid white 1px;
  color: white;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  height: 20px;
  line-height: 20px;
  background-color: #1e1e1e;
}
<div class="wrapper">

  <div class="header">
    <div class="top">header</div>
  </div>
  <div class="menu">
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
  </div>
  <div class="content">
    <input class="cell" type="text" value="dato">
    <input class="cell" type="text" value="nøkkelvaner">
    <input class="cell" type="text" value="oppsumering">
    <input class="cell" type="text" value="oppgaver">
    <input class="cell" type="text" value="andre">
    <input class="cell" type="text" value="dato">
  </div>
  <div class="footer">
    <div class="madeby">footer</div>
  </div>
</div>

Upvotes: 14

Views: 21517

Answers (3)

Andy Hoffman
Andy Hoffman

Reputation: 19111

From MDN:

grid-auto-rows

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track.

If a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows.

From MDN:

min-content

min-content is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

In .content,

Replace this:

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

With this:

grid-auto-rows: min-content;

Result:

enter image description here

jsFiddle

Upvotes: 4

Nithya Rajan
Nithya Rajan

Reputation: 4884

You can use grid-gap property to solve this, It's a shorthand property for grid-row-gap and grid-column-gap. The first value is horizontal gap (row gap), second value is vertical gap (column gap)

grid-gap: 10px 20px;

You can also use the following properties to set gap between the grids:

grid-row-gap: 10px;

grid-column-gap: 20px;

According to the Mozilla Docs:

This property is specified as a value for <'row-gap'> followed optionally by >value for <'column-gap'>. If <'column-gap'> is omitted, it’s set to the same >value as <'row-gap'>.

So, in your code you only sets the grid-gap for row, you should also add the second value for column (vertical)

Upvotes: 19

Abdul Basit
Abdul Basit

Reputation: 1382

The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for the following properties:

You can use also grid-row-gap or grid-column-gap

Upvotes: 1

Related Questions