Basic CSS Grid Framework

framework.css

/* these root values can be adjusted. You can then use them in Oxygen like this: var(-gap-xs) */

:root {
  /* Gap */
  --gap-xs: 4px;
  --gap-s: 8px;
  --gap-m: 16px;
  --gap-l: 32px;
  --gap-xl: 64px;
  
  /* margin */
  --mg-xs: 4px;
  --mg-s: 8px;
  --mg-m: 16px;
  --mg-l: 32px;
  --mg-xl: 64px;  
  
  /* padding */
  --pd-xs: 4px;
  --pd-s: 8px;
  --pd-m: 16px;
  --pd-l: 32px;
  --pd-xl: 64px;

}

/* gap classes */
.gap-xs {
  gap: var(--gap-xs);
}
.gap-s {
  gap: var(--gap-s);
}

.gap-m {
  gap: var(--gap-m);
}

.gap-l {
  gap: var(--gap-l);
}

.gap-xl {
  gap: var(--gap-xl);
}


/* Grid Classes */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: stretch;
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
}

/* grid media queries to reduce the number of items per row on smaller screens */
@media (max-width: 991px) {
  /* these won't fit well on 992px, so lets reduce the number of columns */
  .grid-5, .grid-6, .grid-12 {
    grid-template-columns: repeat(3, 1fr);
  }   
}

@media (max-width: 767px) {
  /* we likely want 2 items per row on mobile tablet, so this adjusts all of the classes */
  .grid-3, .grid-4, .grid-5, .grid-6, .grid-12 {
    grid-template-columns: 1fr 1fr;
  }    
}

@media (max-width: 479px) {
  /* the chances are that we want one item per row on mobile, so this adjusts all of the Grid classes */
  .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-12 {
    grid-template-columns: 1fr;
  }  
}

/* span classes - used on Children within the Grid */
.span-2 {
  grid-column: span 2;
}
.span-3 {
  grid-column: span 3;
}
.span-4 {
  grid-column: span 4;
}
.span-5 {
  grid-column: span 5;
}
.span-6 {
  grid-column: span 6;
}
.span-7 {
  grid-column: span 7;
}
.span-8 {
  grid-column: span 8;
}
.span-9 {
  grid-column: span 9;
}
.span-10 {
  grid-column: span 10;
}
.span-11 {
  grid-column: span 11;
}
.span-12 {
  grid-column: span 12;
}

/* span media queries - this is more of a personal thing as it's very dependent on how you've built the Grid,so you may need to add your own in here */
@media (max-width: 991px) {
  /* If you need to adjust the span for the 992px breakpoint, you can use the below media queries as a guide and place the CSS in here */  
}

@media (max-width: 767px) {
  /* ensure we only span two columns on mobile tablet */
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
    grid-column: span 2;
  }  
}

@media (max-width: 479px) {
  /* ensure we only span one column on mobile */
  .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
    grid-column: span 1;
  }  
}