Kevin Powell - Community•8mo ago

Expanding on the container class

I recently saw a video by Kevin showing a new way of using container classes. Video: https://www.youtube.com/watch?v=c13gpBrnGEw I've tried adapting it for my needs but haven't figured out how to achieve this yet, so I'd like some help/directions. I've attached the image of what I'm trying to accomplish in addition to Kevin's already showcased features of this design. I'm struggling to find a way to set up the container class so that the margins on each side can be overwritten while maintaining the other sides of the normal container sections. I'm really looking forward to any assistance you can provide. Your help would be immensely valuable to me. Thank you in advance!

Kevin Powell

YouTube

A new approach to container and wrapper classes

The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...

1 Reply

MarkBoots•7mo ago

think you mean something like this

<div class="layout">
  <section></section>
  <section class="breakout-left"></section>
  <section class="breakout-right"></section>
  <section class="breakout-both"></section>
</div>

<div class="layout">
  <section></section>
  <section class="breakout-left"></section>
  <section class="breakout-right"></section>
  <section class="breakout-both"></section>
</div>

.layout{
  display: grid;
  grid-template-columns: 1fr min(100%, 60rem) 1fr;
}
.layout > * {
  grid-column: 2;
}
.layout > .breakout-both {
  grid-column: 1 / 4;
}
.layout > .breakout-left { 
  grid-column: 1 / 3;
}
.layout > .breakout-right {
  grid-column: 2 / 4
}

.layout{
  display: grid;
  grid-template-columns: 1fr min(100%, 60rem) 1fr;
}
.layout > * {
  grid-column: 2;
}
.layout > .breakout-both {
  grid-column: 1 / 4;
}
.layout > .breakout-left { 
  grid-column: 1 / 3;
}
.layout > .breakout-right {
  grid-column: 2 / 4
}

Gaming

Programming

Expanding on the container class