Skip to content

Grid System

Code

<div class="grid-demo">
    <div class="page-grid">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
    </div>
</div>

.page-grid {
  display: grid;

  grid-template-columns: repeat(12, minmax(0, 1fr));

  gap: 1rem; /* gutter spacing */
  background-color: #fafaff;
  border-radius: 0.75rem;
  border: 1px solid #e0e0e0;
  box-shadow: 0 0 0 1px #e6e6e6 inset;
  padding: 1rem;
  margin: 1.5rem auto;
  transition: all 0.3s ease;
}

.grid-items {
  border: 1px solid #ccc;
  padding: 20px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.grid-box {
  background-color: rgba(255, 149, 149, 0.35);
  border-radius: 0.5rem;
  min-height: 20rem;
  transition: background-color 0.25s ease;
}

.grid-box:hover {
  background-color: rgba(255, 149, 149, 0.5);
}

/* Responsive behavior — keeps 12 columns but adjusts gutter and margins */
@media (max-width: 600px) {
  .page-grid {
    gap: 0.5rem;
  }
}

@media (min-width: 601px) and (max-width: 1200px) {
  .page-grid {
    gap: 0.75rem;
  }
}

@media (min-width: 1201px) {
  .page-grid {
    gap: 1rem;
  }
}

span4

Code

<div class="grid-demo">
    <div class="page-grid">
        <div class="grid-box highlight span4">span4</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

@for $i from 1 through 12 {
  .span#{$i} {
    grid-column: span #{$i};
  }
}

push2

Code

<div class="grid-demo">
    <div class="page-grid">
        <div class="push2">push2</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

@for $i from 1 through 11 {
  .push#{$i} {
    grid-column-start: #{$i + 1};
  }
}