Useful CSS Shortcuts

Center an Item Both Vertically and Horizontally

To center an item both vertically and horizontally within a container, you can use the following CSS:

.container {
    display: grid;
    place-items: center;
}
    

Create a Circle

To create a circle, you can use the following CSS:

.circle {
    width: 2rem;
    height: 2rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
}
    

Set Both Left and Right Padding

To set both left and right padding, you can use the following CSS:

.button {
    padding-inline: 1rem;
}
    

You can also use this for other properties like border and margin, and use -block for vertical direction.

Style a Button During Both Hover and Focus States

To style a button during both hover and focus states, you can use the following CSS:

button:is(:hover, :focus) { 
    /* Style */
}
    

Create Equal Width Columns in a Grid Container

To create equal width columns in a grid container, you can use the following CSS:

.container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

Follow Us:

Stay updated with our latest tips and tutorials by subscribing to our YouTube Channel.