Skip to main content

CSS Snippets

Center a div​

The easiest way is with Flexbox. Use align-self/ justify-self or auto margin to position specific element.

With auto margins​

First, we need to constrain the element's width; by default, block elements in Flow layout will expand horizontally to fill the available space, and we can't really center something that is full-width. This doesn't apply to inline or inline-block bc they don't take up the full width of their parent container by default.

button {
  /* `inline` or `inline-block` won't work */
  display: block;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

Within the viewport​

inset-0 applies top: 0, right: 0, bottom: 0, left: 0 and make a positioned element (here fixed) stretch to cover the whole viewport.
With only these 2 properties, the element would stretch to fill the entire viewport, growing so that it's 0px from each edge. We need to constrain the size of the element to make it a box that can be centered.

.element {
  /* Positioned */
  position: fixed;
  /* Stretch */
  inset: 0px;
  /* Constrain */
  width: 12rem;
  height: 5rem;
  max-width: 100vw;
  max-height: 100dvh;
  /* Auto margins */
  margin: auto;
}

We can use the same trick to center something in a single direction. For example, we can build a cookie banner that is horizontally centered, but anchored near the bottom of the viewport.

.cookie-banner {
  position: fixed;
  /* Omit `top: 0px` so that auto margin will push it to the bottom */
  left: 0px;
  right: 0px;
  bottom: 8px;
  max-width: 30rem;
  margin: auto;
}

Precisely​

.item {
  position: relative;
  // Ở đây thì mới chỉ là topleft corner của item nằm ở center của container
  top: 50%;
  left: 50%;
  // -> cần transform theo item size để hoàn toàn center item theo container
  transform: translate(-50%, -50%);
}

Image scale with Container width​

.img-fluid {
  width: 100%;
  height: auto;
}

Grid​

Grid 2 columns​

.grid {
  /* ❌ Equal minmax(auto, 1fr) -> the grid item can't be smaller than the content */
  grid-template-columns: repeat(2, 1fr)

  /* min-width = 0, max-width = 1fr -> the grid item is allowed to resize to 0 */
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

Grid 3 rows​

.grid {
  grid-template-rows: 50px 75px auto;
}

Grid item position and area​

.grid-item {
  /* Start at the 2nd column line and span across 2 columns */
  grid-column: 2 / span 2; /* == 2 / 4 */
  /* Start at the 1st row line and span across 3 rows */
  grid-row: 1 / span 3; /* == 1 / 4 */
}

Grid align items​

/* Both default are `stretch`, can also be center, start, end */
.grid-container {
  /*  Row */
  justify-items: center;
  /* Column */
  align-items: start;
}

Grid Basic​

Aspect ratio​

At least one of the box's sizes needs to be automatic in order for aspect-ratio to have any effect. If neither the width nor height is an automatic size, then the provided aspect ratio has no effect on the box's preferred sizes. -> Put the aspect-ratio on the container won't work.

.image-container img {
  aspect-ratio: 1/1;
}
/* Or */
.image-container {
  /* 1:1 Aspect Ratio, e.g 16:9 will have the padding-top at 56.25%  */
  padding-top: 100%;
  position: relative;
}
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-height: 100%;
  margin: auto;
}

:not(:last-of-type) for list item​

li:not(:last-of-type) {
  margin-bottom: 1rem;
}

Hover cho after/before: pseudo class đứng trước pseudo element​

.alo:hover::before {
  content: '';
}