Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rachelandrew/83e96245de648df14a95089f8ba7cbdd to your computer and use it in GitHub Desktop.
Save rachelandrew/83e96245de648df14a95089f8ba7cbdd to your computer and use it in GitHub Desktop.
Grid example of fixed size spanner getting extra space

Grid example of fixed size spanner getting extra space

I have a grid container sized in absolute units, with grid tracks also sized using absolute units. The sum of the tracks in both directions is smaller than the container.

Using the keyword values space-around and space-between increases the spacing between tracks. Any grid area that spans one of these gaps thus gains width or height as the space is added to the total width/height.

A Pen by rachelandrew on CodePen.

<div class="wrapper">
<div class="item1">One</div>
<div class="item2">Two</div>
<div class="item3">Three</div>
<div class="item4">Four</div>
<div class="item5">Five</div>
</div>
<div class="wrapper aligned">
<div class="item1">One</div>
<div class="item2">Two</div>
<div class="item3">Three</div>
<div class="item4">Four</div>
<div class="item5">Five</div>
</div>
.wrapper {
margin: 0 0 20px 0;
width: 500px;
height: 400px;
border: 2px solid #CCC;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 80px);
grid-template-rows: repeat(3,100px);
}
.wrapper.aligned {
align-content: space-around;
justify-content: space-between;
}
.wrapper > div {
background-color: #333;
color: #fff;
padding: 10px;
}
.item1 {
grid-column: 1 / 5;
}
.item2 {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
.item3 {
grid-column: 3 / 5;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fafafa;
color: #000;
margin:40px;
}
@rachelandrew
Copy link
Author

fixed-size-spanner-extra-space

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment