Hiya, buddy!

Greetings and welcome to UI Buddy, a platform where you can find solutions to the most common problems faced by developers when coding user interfaces.

Problems such as grid layouting, gutter space, content alignment, content justification, equal height elements, equal width elements, centering of elements etc. have been solved here using minimal, efficient and very easy-to-understand code.

Each solution contains the required HTML and CSS so that you can fully understand the markup and the styling properties required. Just click on the code to copy it to your clipboard.

We hope that you will find these solutions useful, and if you come up with a better solution or come across a problem not addressed here, do not hesitate to contact us =]

Without any further ado, let's get started!

Equal Height Children

A

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta similique cum cumque assumenda odio blanditiis qui in reprehenderit commodi? Autem?

<div class="parent">
<div class="child">A</div>
<div class="child">Lorem ipsum dolor...</div>
</div>
.parent {
display: flex;
}
Equal Width & Equal Height Children

Equal width and height

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta similique cum cumque assumenda odio blanditiis qui in reprehenderit commodi? Autem?

<div class="parent">
<div class="child">Equal height and...</div>
<div class="child">Lorem ipsum dolor...</div>
</div>
.parent {
display: flex;
}
.child {
flex: 1;
}
Equal Width & Unequal Height Children

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta similique cum cumque assumenda odio blanditiis qui in reprehenderit commodi? Autem?

Equal width but unequal height, interesting...

<div class="parent">
<div class="child">Lorem ipsum dolor...</div>
<div class="child">Equal width but...</div>
</div>
.parent {
display: flex;
align-items: flex-start;
}
.child {
flex: 1;
}
Center Aligned Children

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta similique cum cumque assumenda odio blanditiis qui in reprehenderit commodi? Autem?

I'm vertically centered!

<div class="parent">
<div class="child">Lorem ipsum dolor...</div>
<div class="child">I'm vertically centered!</div>
</div>
.parent {
display: flex;
align-items: center;
}
.child {
flex: 1;
}
Bottom Aligned Children

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta similique cum cumque assumenda odio blanditiis qui in reprehenderit commodi? Autem?

I'm at the bottom!

<div class="parent">
<div class="child">Lorem ipsum dolor...</div>
<div class="child">I'm at the bottom!</div>
</div>
.parent {
display: flex;
align-items: flex-end;
}
.child {
flex: 1;
}
Horizontally Justified Children

I'm left

I'm right

<div class="parent">
<div class="child">I'm left</div>
<div class="child">I'm right</div>
</div>
.parent {
display: flex;
justify-content: space-between;
}
Centered Child

I'm centered

<div class="parent">
<div class="child">I'm centered</div>
</div>
.parent {
display: flex;
align-items: center;
justify-content: center;
}
Two Column Grid

A

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos at nobis explicabo et officia. Necessitatibus.

Third column with dummy text for this example

B

<div class="parent">
<div class="child">A</div>
<div class="child">Lorem, ipsum dolor...</div>
<div class="child">Third column with...</div>
<div class="child">B</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex-basis: 50%;
}
Three Column Grid

A

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos at nobis explicabo et officia. Necessitatibus.

B

Forth column with dummy text for this example

C

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos at nobis explicabo et officia. Necessitatibus.

<div class="parent">
<div class="child">A</div>
<div class="child">Lorem, ipsum dolor...</div>
<div class="child">B</div>
<div class="child">Forth column with...</div>
<div class="child">C</div>
<div class="child">Lorem, ipsum dolor...</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
flex-basis: 33.3%;
}
Column Gutters

A

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos at nobis explicabo et officia. Necessitatibus.

<div class="parent">
<div class="child">A</div>
<div class="child">Lorem, ipsum dolor...</div>
</div>
.parent {
display: flex;
}
.child {
flex: 1;
}
.parent .child:not(:last-child) {
margin-right: 15px;
}
Absolute Position: Top Left

I'm Absolute

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, mollitia corporis? Voluptatem repudiandae numquam fuga vel quae? Rem, asperiores adipisci odio rerum eveniet, et molestiae, facere fuga voluptates veniam iusto.
<div class="parent">
<div class="child absolute">I'm Absolute</div>
<div class="child">Lorem, ipsum dolor...</div>
</div>
.parent {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
Absolute Position: Top Right

I'm Absolute

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, mollitia corporis? Voluptatem repudiandae numquam fuga vel quae? Rem, asperiores adipisci odio rerum eveniet, et molestiae, facere fuga voluptates veniam iusto.
<div class="parent">
<div class="child absolute">I'm Absolute</div>
<div class="child">Lorem, ipsum dolor...</div>
</div>
.parent {
position: relative;
}
.absolute {
position: absolute;
top: 0;
right: 0;
}
Absolute Position: Bottom Right

I'm Absolute

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, mollitia corporis? Voluptatem repudiandae numquam fuga vel quae? Rem, asperiores adipisci odio rerum eveniet, et molestiae, facere fuga voluptates veniam iusto.
<div class="parent">
<div class="child absolute">I'm Absolute</div>
<div class="child">Lorem, ipsum dolor...</div>
</div>
.parent {
position: relative;
}
.absolute {
position: absolute;
bottom: 0;
right: 0;
}
Absolute Position: Bottom Left

I'm Absolute

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, mollitia corporis? Voluptatem repudiandae numquam fuga vel quae? Rem, asperiores adipisci odio rerum eveniet, et molestiae, facere fuga voluptates veniam iusto.
<div class="parent">
<div class="child absolute">I'm Absolute</div>
<div class="child">Lorem, ipsum dolor...</div>
</div>
.parent {
position: relative;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
}
Absolute Position: Center

I'm Absolute

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, mollitia corporis? Voluptatem repudiandae numquam fuga vel quae? Rem, asperiores adipisci odio rerum eveniet, et molestiae, facere fuga voluptates veniam iusto.
<div class="parent">
<div class="child absolute">I'm Absolute</div>
<div class="child">Lorem, ipsum dolor...</div>
</div>
.parent {
position: relative;
}
.absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Overflow Auto

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos sequi voluptatem iusto porro veniam beatae blanditiis nostrum pariatur quaerat aperiam repellendus neque exercitationem repellat, consequuntur atque modi? Autem unde quibusdam nam perspiciatis repellendus nesciunt deserunt! Incidunt quibusdam quo numquam neque voluptate beatae est sapiente dolorum voluptatum, odio optio libero reprehenderit. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos sequi voluptatem iusto porro veniam beatae blanditiis nostrum pariatur quaerat aperiam repellendus neque exercitationem repellat, consequuntur atque modi? Autem unde quibusdam nam perspiciatis repellendus nesciunt deserunt! Incidunt quibusdam quo numquam neque voluptate beatae est sapiente dolorum voluptatum, odio optio libero reprehenderit.

<div class="parent">
<div class="child">
<p>Lorem ipsum dolor...</p>
</div>
</div>
.parent {
height: 180px;
overflow: auto;
}