4 CSS Magic one-liners (Part 1)

Cascading Styling Sheets aka CSS code usually tend to be a nice game changing ingredient in a yummy coded web app. Simple CSS touches can enhance the User Interface and be an attractive User Experience mechanism enhancing performance and user satisfaction.

Question — “Hold on wise guy, more UI changes mean more code, more code means more time, more time means …..? ” and the list goes on.

Here are some of a few easy to use CSS one liners which could really be a game changer for most web apps and web devs

1. Want to center your HTML element in precise way ?

a.k.a - One Love

.parentElement {
  display: grid;
  place-items: center; // here is your magic one liner
}

2. Want to resize your flex items without using any media queries ?

The Flexbox shorthand is as follows — flex: <flex-grow> <flex-shrink> <flex-basis>

a.k.a — The 3 Flex-eteers

.parentElement {
  display: flex;
}

.childElement {
  flex: 0 1 150px; // here is your one liner senyor !
}

3. Want to stretch your sidebar on different screen sizes using CSS Grid’s minimax method?

a.k.a — Min-the-grid-Max

.parentElement {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

4. Want to use Mind-the grid-Max without wrapping any child elements with a changing screen size ?

a.k.a — Sticky-licking-good

.parentElement {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Full credit to Una Kravets from web.dev. Thanks for reading.