A major cause of rift between user interface (UI) designers and frontend developers is the issue of having an awesome UI design being difficult to translate into real life features.

Almost every frontend developer has faced similar fears at certain points during their coding journey. This article will help you understand how CSS displays work with regards to flexbox and grid layout.

Table of Contents:

• Origin of CSS
• Basic Structure of CSS
• CSS Layout (Flex and Grid)
• How to Use the Flex Layout in CSS
• How to Use the Grid Layout in CSS
• Similarities between Flex and Grid
• When to Use Flex
• When to Use Grid
• Conclusion

Origin of CSS

The earliest websites were not only static, but were also text-based. During the early years of the World Wide Web, web pages were written in markup languages such as XHTML and the like.

This is what they looked like:

https://www.history.com/news/the-worlds-first-web-site

With advancements in various technologies, technology enthusiasts were interested in making websites look more pleasant by adding some design. This led to the development of Cascading Style Sheets, better known as CSS.

Although CSS has gone through several evolutions, it is responsible for the aesthetics of websites. Imagine a website or a software application with just text and no design.

Hey! This article is not about history, so let’s get straight to business.

As a software developer majoring in client side applications (often referred to as front-end development), you’d agree with me that CSS is that lovely fellow who looks simple yet sophisticated.

CSS can keep you awake at night while trying to find out why your page is not aligning as expected or the reason your page content is chopped off on certain screens and not responsive too.

One of the reasons why beginners in software development often abandon front-end to major in back-end is the “stress” that comes with writing CSS code, especially with vanilla CSS where you have to manually input virtually every style rule. This is because CSS requires some level of calculation mixed with attention to the most minimal detail.

A major aspect of CSS that often creates confusion is the CSS layout — writing the CSS rule for the page layout can be a bit confusing as a beginner.

In the sections that follow, we'll focus on:

• The similarities between flex and grid displays.
• When to use flex or grid.

Basic Structure of CSS

Before discussing the CSS display in detail, let’s take a brief look at the CSS structure.

For starters, the CSS structure is a box-model. This means that every webpage is treated like a box, similar to having a pizza in a pizza box.

The pizza box here represents the browser page while the pizza represents the content of your website or application, which can be text, graphics, or multimedia.

A box of pizza

CSS box model

CSS Layout (Flex and Grid)

Now that you know how CSS structures the content of every web or application page, a vital aspect of CSS which you should get a grasp of is the layout, which is the crux of this article.

In architecture, every building has its structure. The structure for a commercial building might differ from that of a residential building. Same goes for front-end development.

The purpose of the application goes a long way in the selecting a layout for the. For instance, an e-commerce website would opt for a grid layout for proper arrangement and display of their products.

The layout of every website or application determines how the content on the page will be arranged: either in stacks of rows and columns or just columns across various screen-sizes.

It is also worthy to note that you can use more than one display on a particular webpage. This means that you can display a particular div as a grid and another div as a flexbox. It all boils down to the content of each div and how you want them to appear.

There are two ways to design the layout of a web page’s content in CSS:

• Flex
• Grid

How to Use the Flex Layout in CSS

The flex layout uses a method of arranging the web content in rows (main axis) or columns (perpendicular axis). This implies that it is a one-dimensional layout. The main axis can move in reverse order, from right to left.

The flex direction can be set to:

• Row
• Row-reverse
• Column
• Column-reverse

Using flexbox does not split the screen or content into equal parts. It is worthy to note that, flexbox doesn’t consider splitting content into equal columns across the row or stacking columns in the same alignment. Rather, it expands or shrinks the content to contain the available screen space.

Below is a diagram of a flex display using rows:

A graphical representation of a display set to flex

How to Set Display to Flex

To create a flex layout:

• Give the parent element a style rule of flex display
• Give the children element some margin and padding for a better look
• Specify the direction of the flex if there is a need to

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Setting Display to Flex</title>
<style>
    .fl{
        display: flex;
        flex-wrap: wrap;
    }
    .ex {
        flex-direction:row;
        flex: 1 0 100px; 
        margin: 5px; 
        padding: 10px; 
        background-color: #0000FF; 
        border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
    }
</style>
</head>
<body>

<div class="fl">
    <div class="ex">Content 1</div>
    <div class="ex">Content 2</div>
    <div class="ex">Content 3</div>
    <div class="ex">Content 4</div>
    <div class="ex">Content 5</div>
</div>

</body>
</html>

The code above styles the body by selecting the parent container and assigning it a layout of flex. Then the direction of the children element is set to row using the flex-direction rule.

How to Use the Grid Layout in CSS

The grid layout, on the other hand, divides a web-page into 12 equal columns. These columns can be further split into the desired rows and columns.

The entire screen (100%) divided into 12 gives about 3.33% per column. The screen can also be styled using the number of columns in multiples of 2. That is: 2,4,6,8,10 and 12 with each number specifying the number of columns or width the element is expected to occupy.

How to Set Display to Grid

• Set the parent element's display to grid
• Specify the dimension(i.e rows or columns) of the grid using the grid-template property
• Give some spacing(margin,padding, row-gap, etc) to the child element so the grid can be more visible

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Setting Display to Grid</title>
<style>
    .fl{
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* This would display the children elements in  three equal columns with equal width */
        gap: 5px; /* To set a gap between  thegrid items */
    }
    .gr {
        padding: 20px; 
        background-color: #0000FF; 
        border: 1px solid #ffff; /* I added a border all round each column for better visibility and separation of the columns */
    }
</style>
</head>
<body>

<div class="gr">
    <div class="gr">Content 1</div>
    <div class="gr">Content 2</div>
    <div class="gr">Content 3</div>
    <div class="gr">Content 4</div>
    <div class="gr">Content 5</div>
</div>

</body>
</html>

Similarities between Flex and Grid

• They are both responsive layouts: Irrespective of which layout you decide to use for your application, provided that you style the properties correctly, both layout types are responsive to different screen sizes.

• Setting the parent element's layout first: In styling a flex or grid layout, the parent element is the one styled with the exact layout in question.

When to Use Flex

CSS flex is popular for its order ability (row-reverse, column-reverse), which enables the developer to reorder content without having to change the HTML content manually. There are several uses cases of the CSS flex, such as:

• Building One-dimensional Layouts: For web-pages or sections with a single layout, it is best to use flex as it helps in proper arrangement of the content.
• Alignment and Distribution of Content: Thanks to justify-content, align-self and other properties, alignment and distribution of content is made easy using flex.
• Displaying Columns in Equal heights: Using the align-items property and setting it to a value of stretch, that is: align-items:stretch, CSS flex ensures that columns within a flexbox are of equal heights. This implies that if there is a higher column, other columns will be stretched to meet up with the highest column. You can use CSS flex to display your columns in equal height irrespective of the height of the content.

When to Use Grid

The grid layout is the most commonly used by frontend developers because it allows you to place elements on different sections of the browser page while maintaining proper alignment. You can use the grid layout when:

• Building a Responsive Design: Often times, user interfaces are developed to be adaptable to whatever screen they're being displayed on. In such cases, the grid layout is your best bet because it gives room to flexibility and resizing of the element.
• Control of whitespace: Unlike the flex display that leaves some white space at the extreme, the CSS grid controls white space by distributing elements equally along the row and also based on the allocated column space.
• Consistency in Design Layout: The CSS grid offers a consistent pattern in the structure of a web page. This arrangement of elements makes future editing of the page easier.

Conclusion

One tip that comes very handy when styling a page is to choose which of the display modes to employ.

Once that is settled, the various sections of the page can follow suit bearing in mind what the entire body holds.

Although not an advice, recent practices have seen developers use grid more often than flexbox. Whichever the case, ensure not to mix up the code for the respective displays so you do not run into errors.

Happy Coding!

To illustrate a situation when you might find this useful, let's say we are given a webpage that looks like this:

A webpage whose contents span 100% of the window's width

As you will probably agree, that's not very pleasant to read. One of the things you can do is set a max-width on the container – in this case it's the article element so that it's "contained" in a more pleasing way:

article {
  max-width: 60ch; /* no more than 60 characters per line in this container */
}

Use max-width property to constrain the width of a container

That's better, but it's off to the left. So now, let's place our article text and image at the center of the page by setting margin: 0 auto on the container:

article {
  max-width: 60ch;
  margin: 0 auto; /* center this container */
}

Center our article with margin: 0 auto

Much better now, right? To further optimize readability, we can tweak the font's size and line height as I have done in the playground below:

Now, notice the width of the image: It has been constrained by the width of the container. What if you want the image (or any other element) to span the entire page (that is, full-bleed), like this?

Example of a full-bleed layout

Or what if you just want the image to "break out" to have any width that is wider than its container, like this?

An element breaking out to have a width wider than that of the container

Currently, as far as I know, there are two main ways to accomplish this:

1. You can either do a manual horizontal offset via negative margin-left and translateX to shift the image to the left, or
2. You can use CSS Grid.

But to my mind, the first solution is hacky, and the second solution is heavy-handed.

In this article, I'll cover some simpler ways to do this.

Setting the Stage

First of all, let's free up all the child elements inside the container. Instead of setting a width on the container, we set it to its child elements:

/* Instead of doing this
article {
  max-width: 60ch;
  margin: 0 auto;
}
*/

/* we set width on its direct child elements */
article > * {
  max-width: 60ch; /* childs' width can't go wider than 60ch */
  margin: 0 auto; /* center them */
}

Before:

All children can't grow beyond the confines of their container

After:

Now each child has plenty of space to grow horizontally if it chooses to

The article container is no longer limited to a specific width. It now spans the entire width of the window. This has allowed any child element to grow sideways until the boundary of the window.

For example, we can choose to specifically let the image to grow to our heart's content:

The img element growing wider than the p elements

This is exactly what we are going to learn how to do next.

How to Break Out Childless Elements

Breaking out at its simplest form is when the elements we want to break out are childless. For example, say we want to break out the img element below:

<article>
  <p>Texts</p>
  <img />
  <p>Texts</p>
</article>

And let's make it full-bleed. To do that, we will apply 3 properties on the img:

1. **display: block** – Because a) img is inline by default, and b) margin: 0 auto only works on block elements.
2. **width: 100%** – To have it fully fill the width of its container which is article that already fills the window.
3. **max-width: 100%** – To override the max-width: 60ch and also to stop it from expanding beyond the available horizontal space of its container.

img {
  display: block;
  width: 100%;
  max-width: 100%; 
}

And it works:

Full-bleed layout

Following up on the previous playground:

So far so good.

How to Break Out Elements that Have Children

Now, what if your image is wrapped in a figure, like this:

<figure>
  <img width="900px" src="" alt="" />
  <figcaption></figcaption>
</figure>

And the image has its width set or even just uses its intrinsic width? How will we break it out while centering it?

Without leveraging CSS Flexbox, to make the image full-bleed as before, first we need to set the figure to max-width: 100% so that it can fill the entire horizontal space of article. Next, we need to make sure our img is applied with display: block and margin: 0 auto in order to stay centered.

Compare this to if we were to use CSS Flexbox. Apply a CSS class that contains 3 Flexbox properties to figure alone and we are done:

.break-out {
  display: flex;
  flex-direction: column;
  align-items: center;
}

1. **display: flex** – Set figure as a Flex container from which we can choose to arrange its content – in this case they would be the img and figcaption – either horizontally (row) or vertically (column) along the main axis.
2. **flex-direction: column** – For our use case, we choose to arrange the content vertically.
3. **align-items: center** – Lastly, we choose to always center the content along the cross axis. If main axis is going vertically in flex-direction: column , its cross axis would be going horizontally. So this property allows img and figcaption to always be centered horizontally relative to figure which is now spanning 100% of the screen.

Finally, we just apply the class to the figure element:

<figure class="break-out">
  <img width="900px" src="" alt="" />
  <figcaption></figcaption>
</figure>

Now whatever the width of the img may be, it will be centered even until it's full-bleed:

Benefits of These Methods

The methods I have demonstrated here have the following benefits:

1. Principle of Least Power: CSS Flexbox is a less powerful solution than CSS Grid.
2. No complicated calculation: We let the browser center our image within the available space.
3. Responsive: No re-calculation needed on our part when the browser resizes.

The second-order benefits are:

1. For users: optimal performance – less code shipped and less expensive code to run. Happy browser, happy users.
2. For developers: simpler and less code to maintain, which means less valuable cognitive resources spent.

Background

I found this method when I was building Zuunote. It's a Markdown-based note-taking web app in which images can be resized.

The tricky thing is, in Markdown, image syntax is parsed as an inline element. So, when users do create inline images when writing in a paragraph, this method enables them to resize between inline and full-bleed.

This is how I achieved it. Similar to what we just discussed, I wrapped the img element in a span to retain the inline characters:

<span>
  <img src="" alt="" />
</span>

Then I applied our Flexbox properties on the span when the user has resized beyond the boundary of the paragraphs:

<span class="break-out">
  <img src="" alt="" />
</span>

And the browser will keep the image centered without any expensive hand-holding on my part.

Here is the result:

One gesture covers a spectrum of resizing intentions – I think that's pretty neat :)

Thank you for reading!

This can become tricky at times. And based on certain conditions, a particular method may not work at some point, leaving you searching for alternatives.

In this article, you will learn how to center an image in a div with CSS.

How to Center a div using CSS

You center an image in a div in two ways: horizontally and vertically. When you put these two methods together, you will have an entirely centered image:

By default, web content always begins from the top-left corner of the screen and moves from ltr (left to right) – except for certain languages like Arabic, which goes from rtl (right to left).

Let’s start by seeing how to center an image within a div horizontally. Then we'll see how to center vertically. Finally, we'll see how you can do both together.

How to Center an Image in a Div Horizontally with Text-align

Suppose you have a div in which you place your image this way:

<div class="container">
    <img src="./fcc-logo.png" alt="FCC Logo" />
</div>

And apply basic CSS styling so your image is visible:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
}
.container img {
    width: 100px;
}

The text-align method won't work in all cases, as you typically use it to center text. But when you have your images within a block level container like a div, then this method will work:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    text-align: center;
}

.container img {
    width: 100px;
}

This works by adding the text-align property alongside its value of center to the container and not the image itself.

How to Center an Image in a Div Horizontally with Margin-auto

Another method that you can use to horizontally center an image within a div (container) is the margin property with the value of auto.

The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

You would usually apply this method to the image itself and not the container. But unfortunately, this property alone doesn't work. You also need to specify the width the image will take first. This lets the margin know the remaining width the container has so that it can be split equally.

Secondly, img is an inline element, and the margin-auto property set does not affect inline-level elements. This means you must first convert it to a block-level element with display property set as block.

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
}

.container img {
    width: 100px;
    margin: auto;
    display: block;
}

How to Center an Image in a Div Horizontally with the Position and Transform Properties

Another method you can use to position an image horizontally is the position property alongside the transform property.

This method can be very tricky, but it works. You must first set the container’s position to relative, then the image to absolute.

Once you do this, you can now move the image to whichever position you wish using either the left, top, bottom, or right properties on the image.

In this case, you only want to move the image to the center horizontally. This means you would move the image via the left to 50% or right to -50%:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
}

But when you check your image, you will notice that the image is still not perfectly placed in the center. This is because it started from the 50% mark, which is the center position.

In this case, you need to use the transform-translateX property to adjust it to get the perfect center horizontally:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

How to Center an Image in a Div Horizontally with Display-Flex

CSS flexbox makes it easier for you to design flexible, responsive layout structures without using float or positioning. We can also use this to place an image in the center horizontally of a container using the display property with flex as its value.

But this alone doesn't work. You also need to define the position where you want your image. This could be center, left or maybe right:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    display: flex;
    justify-content: center;
}

.container img {
    width: 100px;
    height: 100px;
}

Note: The display: flex property is not supported in older versions of browsers. You can read more here. You’ll also notice that the width and height of the image are defined to ensure the image doesn't shrink.

Let’s now learn how to center an image in a div vertically. Later we'll see how to center an image in a div horizontally and vertically together, making it a perfect center.

How to Center an Image in a Div Vertically with Display-Flex

Just like how you were able to center the image horizontally with the display-flex method, you can also do the same vertically.

But this time around, you won’t need to use the justify-content property. Rather you'll use the align-items property:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    display: flex;
    align-items: center;
}

.container img {
    width: 100px;
    height: 100px;
}

For this method to work, the container must have a specified height which you will use to calculate the height and know where the center is located.

How to Center an Image in a Div Vertically with the Position and Transform Properties

Similar to how you used the position and transform properties earlier to place your image in the center horizontally, you can also do the same vertically.

But this time around, you won't use left or right,. Instead you will use top or bottom alongside translateY rather than translateX:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

You have learned how to center an image within a div horizontally and vertically using all possible methods. Let’s now learn how to center both horizontally and vertically.

How to Center an Image in a Div Horizontally and Vertically with Display-Flex

The display-flex property is a combination of how you'd center the image vertically and horizontally.

For the flex method, this means you will use both the justify-content and align-items properties set to center:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container img {
    width: 100px;
    height: 100px;
}

How to Center an Image in a Div Horizontally and Vertically with the Position and Transform Properties

This is also very similar, as all you have to do is combine both ways you were able to center vertically and horizontally:

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

You can also combine the translateX and translateY by using translate(x,y):

.container {
    width: 200px;
    height: 200px;
    background-color: #0a0a23;
    position: relative;
}

.container img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Wrapping Up

In this article, you have learned how to center an image in a div vertically, horizontally, or both.

You will often use the Flexbox method when moving an image to the center because the position method can distort your web page and works very trickily.

You can learn more about the CSS position method here and then more about the flexbox method here.

Have fun coding!

Developers often struggle with image alignment in CSS, especially when trying to figure out how to center an image.

Centering anything in CSS is not really a straightforward thing - especially for beginners. This is why people brag about being able to center a div. :)

Since the img element is an inline element, this makes it a little bit harder to center. But don't worry, you can convert the image to a block element and then center it.

In this article, I'm going to show you 4 different ways you can align an image to the center.

Table of Contents

• How to Center an Image With the Text Align Property
• How to Center an Image with Flexbox
• How to Center an Image with CSS Grid
• How to Center an Image with the Margin Property

How to Center an Image With the Text Align Property

You can center an image with the text-align property.

One thing you should know is that the tag for bringing in images – img – is an inline element. Centering with the text-align property works for block-level elements only.

So how do you center an image with the text-align property? You wrap the image in a block-level element like a div and give the div a text-align of center.

<div>
    <img src="fcc22.png" alt="freeCodeCamp" />
</div>

div {
      text-align: center;
    }

How to Center an Image with Flexbox

The introduction of CSS Flexbox made it easier to center anything.

Flexbox works by putting what you want to center in a container and giving the container a display of flex. Then it sets justify-content to center as shown in the code snippet below:

  div {
      display: flex;
      justify-content: center;
    }

P.S.: A justify-content property set to center centers an image horizontally. To center the image vertically too, you need to set align-itemsto center.

How to Center an Image with CSS Grid

CSS Grid works like Flexbox, with the added advantage that Grid is multidimensional, as opposed to Flexbox which is 2-dimensional.

To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid. Then set the place-items property to center.

 div {
      display: grid;
      place-items: center;
    }

P.S.:place-items with a value of center centers anything horizontally and vertically.

How to Center an Image with the Margin Property

You can also center an image by setting a left and right margin of auto for it. But just like the text-align property, margin works for block-level elements only.

So, what you need to do is convert the image to a block-level element first by giving it a display of block.

img {
      display: block;
      margin: 0 auto;
    }

Those 2 properties could be enough. But sometimes, you have to set a width for the image, so the left and right margin of auto would have spaces to take.

 img {
      display: block;
      margin: 0 auto;
      width: 40%;
    }

P.S.: You might not have to go as low as 40% for the width. The image was distorted at a 60+ percentage, that’s why I went as low as 40%.

I hope this article helps you choose which method works best for you in centering an image.

Thank you for reading.

In fact, to use the modern Flexbox and Grid models, you need to use the display property before you get access to their various properties and values. This is one reason why the display property is so important in CSS.

Let's dive in and learn how to use the display property and all its different values.

Basic display Property Syntax

element {
        display: value;
     }

Display Property Values in CSS

There are inline and block-level elements in CSS. The difference between the two is that inline elements don't take up an entire space – that is, they don't start on a new line – but block elements do.

The display property takes many different values such as inline, inline-block, block, table, and more, which all influence the layout and presentation of an element on the web page. Also, to implement the flex and grid layouts, you need to use the display property.

You can use this display property to change an inline element to block, block element to inline, block and inline elements to inline-block, and many more.

display: inline

An element with a display property set to inline will not start on a new line and it will take up the remaining/available screen width. It just takes up the space such an element would normally take.

Because of this, you can't set the width and height of an element that has a display of inline, becuase it does not take up the whole screen width.

Some elements are inline by default, like <span>, <a>, <i>, and <img>.

<div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      <span>This is an inline lement</span> Modi eaque debitis eos quod labore
      maiores delectus asperiores voluptatem voluptas soluta!
</div>

 body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        font-size: 2rem;
      }
div {
        max-width: 600px;
      }
span {
        background-color: #006100;
      }

display: block

An element that has the display property set to block starts on a new line and takes up the available screen width.

You can specify the width and height properties for such elements. Examples of elements that are at block-level by default are <div>, <section>, <p>, and lots more.

You can set the span from the previous HTML code to block display and it will behave like a block-level element.

span {
        display: block;
        background-color: #006100;
      }

You can see that the <span> takes up the full width. That's because it has a display property set to block.

display: inline-block

Apart from block and inline display, there's also inline-block.

An element you assign a display of inline-block is inline by presentation. But it has the added advantage of you being able to apply width and height to it, which you can't do when the element is assigned a dispaly of inline.

So, you can look at the inline-block display as an inline element and block element in one package.

 span {
        display: inline-block;
        background-color: #006100;
        width: 140px;
        height: 140px;
      }

display: none

When you set the display property of an element to none, the element is completely taken off the page and it doesn’t have an effect on the layout.

This also means that devices like screen readers, which make websites accessible to blind people, wont't have access to the element.

Do not confuse display: none with visibility: hidden. The latter also hides the element, but leaves the space it would normally take open or empty.

span {
        display: none;
        background-color: #006100;
        width: 140px;
        height: 140px;
      }

Visibility hidden leaves the space occupied by the span element open, as you can see below:

 span {
        visibility: hidden;
        background-color: #006100;
        width: 140px;
        height: 140px;
      }

display: table

You'll rarely use a display value of table these days, but it's still important to know. It was more useful in the past because you would use it for layouts before the advent of floats, Flex, and Grid.

Setting display to table makes the element behave like a table. So you can make a replica of an HTML table without using the table element and corresponding elements such as tr and td.

For example, in HTML, you can make a table with the <table> element and also a <div>, or any container of your choice.

You make a table with the HTML <table> element like this:

<table>
      <tr>
        <td>Fruits</td>
        <td>Lemurs</td>
        <td>Pets</td>
      </tr>
      <tr>
        <td>Cashew</td>
        <td>Hua hua</td>
        <td>Dog</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Diadem Sifaka</td>
        <td>Cat</td>
      </tr>
      <tr>
        <td>Mango</td>
        <td>Rig-tailed</td>
        <td>Chicken</td>
      </tr>
</table>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 2rem;
}

div {
    max-width: 600px;
}

span {
    display: inline-block;
    background-color: #006100;
    width: 140px;
    height: 140px;
}

tr,
td {
    padding: 10px;
}

The result of the HTML and CSS code snippets above looks like this:

But you can make the same table with the <div> element by setting the respective displays to table, table-row, and table-cell. You will get the same result as you can see below:

 <div class="table">
      <div class="row">
        <div class="cell">Fruits</div>
        <div class="cell">Lemurs</div>
        <div class="cell">Pets</div>
      </div>
      <div class="row">
        <div class="cell">Cashew</div>
        <div class="cell">Hua hua</div>
        <div class="cell">Dog</div>
      </div>
      <div class="row">
        <div class="cell">Apple</div>
        <div class="cell">Diadem Sifaka</div>
        <div class="cell">Cat</div>
      </div>
      <div class="row">
        <div class="cell">Mango</div>
        <div class="cell">Ring-tailed</div>
        <div class="cell">Chicken</div>
      </div>
</div>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 2rem;
}

div {
    max-width: 600px;
}

span {
    display: inline-block;
    background-color: #006100;
    width: 140px;
    height: 140px;
}

.table {
   display: table;
}

.row {
   display: table-row;
}

.cell {
   display: table-cell;
}

.row,
.cell {
  padding: 10px;
}

You still get your table:

Other values of the Display Property

Apart from inline, block, none, and table, which are really important because they significantly influence how web pages look, there are other values of the display property worthy of your attention.

Some of them you'll use all the time without really realizing that they are also part of the display property. And others you won't use often at all.

Let's look at some of them now.

display: flex

A display of flex gives you access to the Flex layout system, which simplifies how we design and layout our web pages.

<div class="container">
      <div class="child">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <span>This is an inline element</span> Modi eaque debitis eos quod
        labore maiores delectus asperiores voluptatem voluptas soluta!
      </div>
      <div class="child">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <span>This is an inline element</span> Modi eaque debitis eos quod
        labore maiores delectus asperiores voluptatem voluptas soluta!
      </div>
</div>

.container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        font-size: 2rem;
}

span {
       visibility: hidden;
       background-color: #006100;
       width: 140px;
       height: 140px;
}

.child {
       border: 2px solid crimson;
       margin: 4px;
}

display: grid

A display set to grid allows you to build layouts with the grid system, which is like an advanced form of flex.

<div class="container">
      <div class="child">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <span>This is an inline element</span> Modi eaque debitis eos quod
        labore maiores delectus asperiores voluptatem voluptas soluta!
      </div>
      <div class="child">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <span>This is an inline element</span> Modi eaque debitis eos quod
        labore maiores delectus asperiores voluptatem voluptas soluta!
      </div>
</div>

.container {
        display: grid;
        place-items: center;
        height: 100vh;
        font-size: 2rem;
      }

span {
       visibility: hidden;
       background-color: #006100;
       width: 140px;
        height: 140px;
}

.child {
       border: 2px solid crimson;
       margin: 4px;
}

display: inherit

This makes the element inherit the display property of its parent. So, if you have a <span> tag inside a div and you give the span tag a display of inherit, it turns it from inline to block element.

<div>
      Lorem ipsum dolor sit amet consectetur
      <span>Inline element</span> adipisicing elit. Cumque cupiditate harum
      consectetur a exercitationem laboriosam nobis eos pariatur expedita iure.
</div>

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     font-size: 2rem;
}

span {
     display: inherit;
     background-color: crimson;
}

display: initial

This sets the display property of an element to its default value. So, if you set the display property of a span to initial, it remains inline, and if you set the same value for a div, it remains block.

<div>
      Lorem ipsum dolor sit amet consectetur
      <span>Inline element</span> adipisicing elit. Cumque cupiditate harum
      consectetur a exercitationem laboriosam nobis eos pariatur expedita iure.
</div>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 2rem;
}

span {
    display: initial;
    background-color: crimson;
}

Conclusion

Having a good grasp of the display property will help your page layouts look great. It also gives you a lot more control over the way you present your elements while working with CSS.

You can continue to come back to this article for reference too as the display property is always confusing at first until you use it enough to understand it fully.

I hope this article has given you the background knowledge you need in order to put the display property to good use.

Thank you for reading, and keep coding.

Table of Contents

• Flexbox Architecture
• Setup
• Level-1
• Level-2
• Level-3
• Level-4
• Level-5
• Conclusion

You can check out the Figma design here

You can also watch this tutorial on my YouTube channel here:

What is Flexbox?

We need a blueprint when constructing a house. In the same way, we need a blueprint to layout our content across our browser. At the same time, we need to make responsive layouts for various screen sizes.

This is what Flexbox helps us do – create responsive layouts.

Flexbox Architecture

So how does Flexbox architecture work? The flex-items [Contents] are distributed along the Main Axis and Cross Axis. And, depending on the flex-direction property, the layout position changes between rows and columns.

Flexbox Chart

This chart contains every possible property and value you can use when using flexbox. You can reference it while doing the project and experimenting with different values.

Before We Get Started...

You need to know a little bit of HTML and CSS. Throughout this tutorial, you'll learn how Flexbox works, how its various properties and values work, and how media queries work (which help us make responsive websites).

Project Setup

Before coding, we need to save some values in variables and clear the default browser styles. Along with that, we will define some media query mixins to save time and avoid code repetition.

SCSS

SCSS is a preprocessor of CSS which gives us much more functionality than regular CSS.

For example, we can nest child classes inside their parent class, store values in variables, and much more. It really helps us save time.

Let's start playing around with SCSS. Open CodePen or any code editor and go through this with me, these step by step.👇

How to Enable SCSS in Codepen 👇

First, define the border color, gap, and padding values in your variables.

$gap : 4vh;
$padding : 4vh;
$color : #48CAE4;

Next, define various screen breakpoints in the SCSS map. Remember, on our SCSS map, [mobile, tablet, and desktop] are keys and the pixels are values.

$bp : (
  mobile : 480px,
  tablet : 768px,
  desktop : 1440px,
);

To save time and code, when defining media queries we'll use mixins and loop the breakpoints we defined above. 👆

@mixin query($display){
  @each $key, $value in $bp{

    //  defining max-width
    @if ($display == $key){
      @media (max-width: $value){@content;}
    }
  }
}

Now we have to change the default styles of our browser. We remove the margin and padding and set the box-sizing to border-box.

//Changing The Default Settings..

*{
  margin:0px;
  padding: 0px;
  box-sizing: border-box;

// Changing the body here

  body{
    width: 100%;
    min-height: 100vh;
    font-family: sans-serif;
    font-size: 45px;
  }
}

Let's talk about the relationship between the HTML classes we're going to use. Always remember that Flexbox works on child classes.

For example, Flexbox properties defined on the Container class work on Block, and properties defined on the Block class work on the Box class. Here's an illustrated explanation of what I mean: 👇

Now let's create these layouts. We'll start with an easier difficulty level and move to more advanced layouts.

Layout Difficulty Level-1 – How to Build a Card Layout

HTML

The container class will hold 3 children -> block-1, block-2, and block-3.

The block-1 class will carry 3 boxes -> box-1, box-2, and box-3.

The same rules apply for the block-2 and block-3 classes, but the values will be changed.

<div class="container">

<!--block-1 has 3 children, box-1,box-2,box-3 -->

  <div class="block-1">
    <div class="box-1"> A </div>
    <div class="box-2"> B </div>
    <div class="box-3"> C </div>
  </div>

<!--similar to block-1, values are changed -->

  <div class="block-2">
    <div class="box-4"> D </div>
    <div class="box-5"> E </div>
    <div class="box-6"> F </div>
  </div>

<!--similar to block-1, values are changed -->

  <div class="block-3">
    <div class="box-7"> G </div>
    <div class="box-8"> H </div>
    <div class="box-9"> I </div>
  </div>
</div>

SCSS

Now, we're going to style our container class. Remember, to trigger Flexbox and access all its powers, you need to write display: flex; like this:

// Style rules for container class

.container{
  display: flex;

//to lay .block-* classes in a column
  flex-direction: column;

//Setting gap between the .block-* classes
  gap: $gap;

// to set some padding & border inside
  padding: $padding;
  border: 1vh solid $color;
}

Select all the .block-* classes and style them together. At the same time, at the bottom, we will define our media query using the mixin we created during the setup phase.

[class ^="block-"]{

//To lay the boxes in a row.
  display: flex;
  flex-direction: row;

//Removing border(1vh+1vh), gap, & padding from the height
// And then equally distributing spaces between the 
// .block-* classes by dividing it by 3

  height: (100vh-2vh -$gap*2-$padding*2) / 3;

// putting gap between .box-* classes
  gap: $gap;

// Style rules for mobile display

  @include query (mobile){
    flex-direction: column;

// you can pick any value you wish.
    height: 500px;
  }

}

Alright then, next select all the .box-* classes and style them together like this:

[class ^="box-"]{

// To set the text at center of every box
  display: flex;
  justify-content: center;
  align-items: center;

// To divide spaces among the boxes
// try flex-gap:1; you can see the difference.
// flex-grow: 1; // 1+1+1 =3 => 1/3 X 100% => 33.33% each

  flex-basis: (100%)/3; // 33.33% each
  border : 2px solid black;
  border-radius: 10px;
  background-color: #c1c1c1;
}

Layout Difficulty Level-2 – How to Build a Nav Bar Layout

HTML

Remove the HTML code of level-1 and write this code instead. Basically it's 1 parent class with 4 child classes.

<div class="container">
  <div class="item-1"> Home </div>
  <div class="item-2"> About </div>
  <div class="item-3"> Services </div>
  <div class="item-4"> Contact </div>
</div>

SCSS

Here are the style rules for the container class for level-2. At the bottom, we will set up a media query using the mixin.

.container{
  font-size: 35px;
  display: flex;

//To set orientation of the items
  flex-direction: row;

// To distribute available space
  justify-content: space-evenly;
  padding: $padding;
  border : 1vh solid $color;

// style rules starts from Tablet Screens
  @include query(tablet){
    height : 100vh;
//Changing orientation of the items
    flex-direction: column;
    align-items: center;

//Setting gap for items Vertically
    gap: $gap 
  }
}

Layout Difficulty Level-3 – How to Build a Sidebar Layout

HTML

Now, we'll work with this code block:

<div class="container">
  <div class="block-1"> Left </div>
  <div class="block-2"> Right </div>
</div>

SCSS

The Style rules of the container class with the media query mixin are included at the bottom for level-3:

.container{
  display: flex;
  flex-direction: row;
  gap: $gap;
  padding: $padding;

// Style Rules for Mobile Display

  @include query(mobile){
    flex-direction: column;
  }
}

Here, we select and style all .block-* classes along with the media query for mobile display:

[class ^="block-"]{

//To put the left, right text at center
  display: flex;
  justify-content: center;
  align-items: center;

  border : 4px solid $color;
//Setting height of each block
  height: 100vh -$padding*2;

// Style Rules for Mobile Display
  @include query(mobile){
    height: 50vh -$padding*2;
  }
}

Now we individually target the block-1 and block-2 classes. We also change the flex-grow value in order to distribute screen space.

// Style Rules Left Block

.block-1{
//will occupy 20% of the Available width
  flex-grow: 2;
}

// Style Rules Right Block

.block-2{
//will occupy 80% of the Available width
  flex-grow: 8;
}

Take A Break :D

Layout Difficulty Level-4 – How to Build a Card Layout #2

HTML

The HTML rules here are similar to level-1 with a few changes:

<div class="container">

  <div class="block-1">
    <div class="box-1"> A </div>
  </div>


  <div class="block-2">
    <div class="box-2"> B </div>
    <div class="box-3"> E </div>
  </div>


  <div class="block-3">
    <div class="box-4"> C </div>
    <div class="box-5"> D </div>
  </div>

</div>
</div>

SCSS

Style the container class like this:

.container {
  display: flex;
  flex-direction: column;
  padding: $padding;
  gap: $gap;
}

Next, select and style all the block-* classes together along with the media query mixin at the bottom for mobile devices:

[class ^="block-"]{
  display: flex;
  flex-direction: row;
  gap: $gap;

// Removing Padding, Gap & divide by 3
  height: (100vh -$gap*2 -$padding*2)/3;

// Style Rules for Mobile Version  
  @include query(mobile){
    flex-direction: column;
  }
}

Now select and style all the box-* classes together:

[class ^="box-"]{

// To place the letter at center
  display: flex;
  justify-content: center;
  align-items: center;

// Border, Border-radius & background-color
  border : 1vh solid $color;
  border-radius: 10px;
  background-color: #c1c1c1;
}

Now, we'll individually target the boxes and use flex-basis to distribute screen space.

//A
.box-1{
  flex-basis: 100%;
}

//B & D
.box-2, .box-5{
  flex-basis: 70%;
}
//E  & C
.box-3,.box-4{
  flex-basis: 30%
}

Finally, we will include the media query mixin for the mobile version.

// Style Rules for Mobile Version 

@include query(mobile){
  .block-2{
    height: (100vh*2)/3; // 66.66vh
  }
  .block-3{
    flex-direction: row;
  }

//   Selecting B, E, C, D
  .box-2,.box-3,.box-4,.box-5{
    flex-basis: 50%;
  }
}

Are you winning yet? Let's turn up the heat. 🥵

Layout Difficulty Level-5 – The Holy Grail of Layouts

HTML

The HTML rules here are similar to level-1 and level-4 with a few changes:

<div class="container">

  <div class="block-1">
    <div class="box-1"> A </div>
  </div>

  <div class="block-2">
    <div class="box-2"> B </div>
    <div class="box-3"> C </div>
    <div class="box-4"> D </div>
  </div>

  <div class="block-3">
    <div class="box-5"> E </div>
  </div>
</div>

SCSS

First, change the container class styles like this:

.container{
  display: flex;
  flex-direction: column;
  gap: $gap;
  padding: $padding;
}

Then, target and style all block-* classes together.

// Style rules of all .block-*

[class ^="block-"]{
  display: flex;
  flex-direction: row;
  gap: $gap;
}

Next, target and style all box-* classes together.

// Style rules of all .box-*

[class ^="box-"]{
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1vh solid $color;
  border-radius: 10px;
}

Then individually target the boxes and use flex-basis to distribute screen space.

// Defining A & E Together
.box-1,.box-5{
  flex-basis: 100%;
  height: 20vh;
}

// Defining C here
.box-3{
  flex-basis: 60%;
//   Removing Gap & padding
  height: 60vh -$gap*2-$padding*2;
}

// Defining B & D Together
.box-2,.box-4{
  flex-basis: 20%;
}

Lastly, include the media query mixin for the mobile version. Notice that we are hiding box-2 for the mobile version.

// Media query for mobile Screen

@include query(mobile){
  .block-2{
    flex-direction: column;
    height: 60vh;
  }
// Hiding our B block
  .box-2{
    display: none;
  }
// Increasing Height of C  
  .box-3{
    flex-basis: 80%;
  }
}

Conclusion

Thanks for following along! Hopefully now you understand the basics of Flexbox. Here's your medal for reading till the end. ❤️

Suggestions and criticisms are highly appreciated ❤️ Do get in touch with me via the social media links below if you have any questions.

Image Credits

Kitty Avatar Kitty with duck Cute Rabbit Cute Bear

More layout Designs here

YouTube / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb