CSS Utility Snippets Helpers That Actually Come in Handy

Sometimes you do not need a whole framework. You just need a few solid CSS helpers you can paste into a project and keep moving. This lightweight utility pack gives you practical classes for spacing, truncation, aspect ratios, sticky sections, clean containers, and more.

/* =========================================
   Lightweight CSS Utility Snippets
   Paste into your stylesheet and use as needed
   ========================================= */

/* Layout */
.container-sm{
  width:min(100% - 24px, 720px);
  margin-inline:auto;
}

.container-md{
  width:min(100% - 24px, 980px);
  margin-inline:auto;
}

.container-lg{
  width:min(100% - 24px, 1200px);
  margin-inline:auto;
}

.grid-auto{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}

.flex-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* Spacing */
.mt-8{margin-top:8px;}
.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.mb-8{margin-bottom:8px;}
.mb-16{margin-bottom:16px;}
.mb-24{margin-bottom:24px;}
.p-8{padding:8px;}
.p-12{padding:12px;}
.p-16{padding:16px;}
.p-24{padding:24px;}

/* Text helpers */
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-muted{opacity:.72;}
.text-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.line-clamp-3{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.break-anywhere{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Visibility */
.hide{display:none !important;}
.show-block{display:block !important;}
.show-inline{display:inline !important;}
.show-flex{display:flex !important;}

/* Media */
.img-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.aspect-16-9{
  aspect-ratio:16 / 9;
}

.aspect-1-1{
  aspect-ratio:1 / 1;
}

.media-frame{
  overflow:hidden;
  border-radius:14px;
  background:#111;
}

/* Positioning */
.sticky-top{
  position:sticky;
  top:16px;
}

.center-abs{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

/* Surfaces */
.card-lite{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.card-pad{
  padding:16px;
}

.rounded-sm{border-radius:8px;}
.rounded-md{border-radius:14px;}
.rounded-lg{border-radius:20px;}

/* Borders */
.border{
  border:1px solid rgba(0,0,0,.1);
}

.border-top{
  border-top:1px solid rgba(0,0,0,.1);
}

.border-bottom{
  border-bottom:1px solid rgba(0,0,0,.1);
}

/* Scroll */
.scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.no-scrollbar{
  scrollbar-width:none;
}
.no-scrollbar::-webkit-scrollbar{
  display:none;
}

/* Buttons / links */
.link-clean{
  color:inherit;
  text-decoration:none;
}

.link-clean:hover{
  text-decoration:underline;
}

.btn-reset{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
}

/* Interaction */
.hover-lift{
  transition:transform .18s ease, box-shadow .18s ease;
}
.hover-lift:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}

.focus-ring:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

/* Utility states */
.pointer{cursor:pointer;}
.select-none{user-select:none;}
.w-100{width:100%;}
.h-100{height:100%;}
.min-vh-100{min-height:100vh;}

/* Responsive helper */
@media (max-width:700px){
  .hide-mobile{display:none !important;}
}
@media (min-width:701px){
  .hide-desktop{display:none !important;}
}