From 00e8d3e85750f102524f23ae32fecadcb86e237e Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Fri, 1 Sep 2023 07:46:42 +0700 Subject: [PATCH] feat: Center align one and left align the other --- ...ter-align-one-and-left-align-the-other.mdx | 366 ++++++++++++++++++ 1 file changed, 366 insertions(+) create mode 100644 contents/center-align-one-and-left-align-the-other.mdx diff --git a/contents/center-align-one-and-left-align-the-other.mdx b/contents/center-align-one-and-left-align-the-other.mdx new file mode 100644 index 0000000..7cf54f7 --- /dev/null +++ b/contents/center-align-one-and-left-align-the-other.mdx @@ -0,0 +1,366 @@ +--- +category: Display +created: '2023-08-27' +description: How to center align one element and left align the other +keywords: css flexbox, css grid +openGraphCover: /og/css-layout/center-align-one-left-align-other.png +thumbnail: /assets/css-layout/thumbnails/center-align-one-left-align-other.png +title: Center align one and left align the other +--- + +Using a single row to display all elements is a common pattern in web design. These elements can be divided into different groups and arranged on the left, center, or right side of the row. + +You've probably seen this pattern before, like in a toolbar where the main actions are grouped and displayed at the center. Meanwhile, less important buttons are located on the left side, like a button to toggle the sidebar. + +Another example is the header of a web application, where the main title is displayed at the center, and a button to go back to the previous page is on the left side. + +In this post, we'll learn how to create this kind of layout. To keep it simple, let's assume that the layout consists of only two elements. + +```html +
+
+
+
+``` + +## Using CSS flexbox + +Initially, our first idea might be to use flexbox to arrange the layout. + +```css +.container { + display: flex; + justify-content: center; +} +``` + +To align the first element to the left and center the remaining items, we can use the margin property. Here's an example: + +```css +.container__left { + margin-right: auto; +} +.container__center { + margin-right: auto; +} +``` + +Let's take a look at what it looks like: + + +```css demo.css hidden +:root { + --placeholder-size: 1rem; +} +body { + align-items: center; + display: flex; + justify-content: center; +} +.circle { + background-color: rgb(203 213 225); + border-radius: 9999px; + height: var(--placeholder-size); + width: var(--placeholder-size); + margin-right: 0.125rem; +} +.square { + background-color: rgb(203 213 225); + border-radius: 0.25rem; + height: var(--placeholder-size); + width: var(--placeholder-size); + margin: 0 0.125rem; +} +.container { + border: 1px solid rgb(203 213 225); + border-radius: 0.25rem; + padding: 0.5rem; + width: 16rem; +} +.container__left, +.container__center { + align-items: center; + display: flex; + justify-content: center; +} +``` + +```css styles.css +.container { + display: flex; +} +.container__left { + margin-right: auto; +} +.container__center { + margin-right: auto; +} +``` + +```html index.html +
+
+
+
+
+
+
+
+
+
+
+
+
+``` + + +Unfortunately, our expectation doesn't match reality. The main element is centered only within the available space, not the entire container. Let's move on to the next section to find a solution to this issue. + +## Using CSS grid + +In addition to CSS flexbox, CSS offers another powerful tool for creating layouts: CSS grid. We can use this technique to solve the issue we talked about earlier. + +Let's say we now have three elements in our layout instead of two, and we need to add an empty element on the right-hand side. + +```css +.container { + display: grid; + grid-template-columns: 1fr repeat(1, auto) 1fr; +} +``` + +Let's dive into some CSS talk. The first CSS declaration is simple: it replaces the `flex` value with `grid`, which tells the browser to create a grid layout. + +Now, the second CSS declaration might seem confusing, but it's actually quite easy to understand. The `1fr` means that the first and last columns should take up an equal amount of space. The `repeat(1, auto)` declaration means that there should be one column with a width of `auto`. + +So, in simpler terms, this CSS declaration creates a layout with three columns. The first and last columns will have equal width, while the middle column will adjust its width to fit its content. + +Lastly, we want the main element to start at the second column. So, we can set the `grid-column-start` property to 2. + +```css +.container__center { + grid-column-start: 2; +} +``` + +Now, it's a breeze to move the first column to the left. + +```css +.container__left { + margin-right: auto; +} +``` + +Finally, let's check out the demonstration to see the progress we've made so far! + + +```css demo.css hidden +:root { + --placeholder-size: 1rem; +} +body { + align-items: center; + display: flex; + justify-content: center; +} +.circle { + background-color: rgb(203 213 225); + border-radius: 9999px; + height: var(--placeholder-size); + width: var(--placeholder-size); + margin-right: 0.125rem; +} +.square { + background-color: rgb(203 213 225); + border-radius: 0.25rem; + height: var(--placeholder-size); + width: var(--placeholder-size); + margin: 0 0.125rem; +} +.container { + border: 1px solid rgb(203 213 225); + border-radius: 0.25rem; + padding: 0.5rem; + width: 16rem; +} +.container__left, +.container__center { + align-items: center; + display: flex; + justify-content: center; +} +``` + +```css styles.css +.container { + display: grid; + grid-template-columns: 1fr repeat(1, auto) 1fr; +} +.container__left { + margin-right: auto; +} +.container__center { + grid-column-start: 2; +} +``` + +```html index.html +
+
+
+
+
+
+
+
+
+
+
+
+
+``` + + +Replacing the non-existing third column with the real one is a piece of cake. All you need to do is push it to the right using a single CSS declaration. + +```css +.container__right { + margin-left: auto; +} +``` + + +```css demo.css hidden +:root { + --placeholder-size: 1rem; +} +body { + align-items: center; + display: flex; + justify-content: center; +} +.circle { + background-color: rgb(203 213 225); + border-radius: 9999px; + height: var(--placeholder-size); + width: var(--placeholder-size); + margin-right: 0.125rem; +} +.square { + background-color: rgb(203 213 225); + border-radius: 0.25rem; + height: var(--placeholder-size); + width: var(--placeholder-size); + margin: 0 0.125rem; +} +.container { + border: 1px solid rgb(203 213 225); + border-radius: 0.25rem; + padding: 0.5rem; + width: 16rem; +} +.container__left, +.container__center, +.container__right { + align-items: center; + display: flex; + justify-content: center; +} +``` + +```css styles.css hidden +.container { + display: grid; + grid-template-columns: 1fr repeat(1, auto) 1fr; +} +.container__left { + margin-right: auto; +} +.container__center { + grid-column-start: 2; +} +.container__right { + margin-left: auto; +} +``` + +```html index.html hidden +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` + + +## Usages + +In addition to the sample usages mentioned earlier, I've been using this technique to create a layout that centers the main content of the page while aligning the sidebar to the right side of the screen. + +Here's an example of what the layout looks like: + + +```css demo.css hidden +.container { + border: 1px solid rgb(203 213 225); + width: 100%; + height: 16rem; +} +.container__main { + align-items: center; + display: flex; + justify-content: center; + + background: rgb(203 213 225); + width: 9rem; +} +.container__sidebar { + align-items: center; + display: flex; + justify-content: center; + + background: rgb(226 232 240); + width: 4rem; +} +@media (min-width: 600px) { + .container__main { + width: 15rem; + } + .container__sidebar { + width: 8rem; + } +} +``` + +```css styles.css +.container { + display: grid; + grid-template-columns: 1fr repeat(1, auto) 1fr; +} +.container__main { + grid-column-start: 2; +} +.container__sidebar { + margin-left: auto; +} +``` + +```html index.html +
+
Main
+
Sidebar
+
+``` +