What steps do I need to follow in order to replicate the layout shown in this

Question

What steps do I need to follow in order to replicate the layout shown in this

I am struggling with creating a layout in CSS that resembles the one shown in this photo:

enter image description here

Here is the HTML structure I have, but I can't figure out how to style it properly.


        <ul class="list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

I've made some attempts at styling it, but it's not working as expected:


        .list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, auto);
            justify-content: center;
            align-items: center;
            row-gap: 50px;
            column-gap: 30px;

            > li {
                list-style: none;

                &:nth-child(4) {
                    grid-row-start: 2;
                    grid-column-start: 1;
                    grid-column-end: 1;
                }

                &:nth-child(4) {
                    grid-row-start: 2;
                    grid-column-start: 2;
                    grid-column-end: 2;
                }
            }
        }

Please assist me in solving this issue. Thank you!

html css layout

Answer 1

Answer №1

Although CSS Grid is a powerful tool, I believe that for this specific situation, using flexbox would be more beneficial.

Let me elaborate on my suggestion:

It is essential to include flex-wrap: wrap so that the content wraps properly instead of extending in a single line.
I made some adjustments to the CSS styles of the li elements to achieve the desired appearance while maintaining the use of list items (such as removing bullet points, adding a gray background for better visibility, introducing spacing between items, and adjusting box-sizing to prevent excessive width due to margin). Unless there is a specific semantic requirement for using lists and list items (e.g., accessibility), it might be more suitable to use div elements instead.
The property flex-shrink: 0; ensures that items do not shrink to fit the container but maintain their specified size (in this case, 30% width).

.list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

ul.list li {
  background-color: lightgray;
  box-sizing: border-box;
  padding: 1em;
  margin: 0.5em;
  list-style-type: none;
  width: 30%;
  flex-shrink: 0;
}

<ul class="list">
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
</ul>

Answer 2

Although CSS Grid is a powerful tool, I believe that for this specific situation, using flexbox would be more beneficial.

Let me elaborate on my suggestion:

It is essential to include flex-wrap: wrap so that the content wraps properly instead of extending in a single line.
I made some adjustments to the CSS styles of the li elements to achieve the desired appearance while maintaining the use of list items (such as removing bullet points, adding a gray background for better visibility, introducing spacing between items, and adjusting box-sizing to prevent excessive width due to margin). Unless there is a specific semantic requirement for using lists and list items (e.g., accessibility), it might be more suitable to use div elements instead.
The property flex-shrink: 0; ensures that items do not shrink to fit the container but maintain their specified size (in this case, 30% width).

.list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

ul.list li {
  background-color: lightgray;
  box-sizing: border-box;
  padding: 1em;
  margin: 0.5em;
  list-style-type: none;
  width: 30%;
  flex-shrink: 0;
}

<ul class="list">
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
</ul>

What steps do I need to follow in order to replicate the layout shown in this

Answer №1

Similar questions

Adding a linear gradient with a fade effect to Highcharts sparkline chart: Step by step guide

Text is not visible when hovering over it

Image floating to the left and right sides within a group, with the text vertically aligned in the middle of a div of unspecified height

Struggling to change h2 style on WordPress?

I'm confused as to why the icon color isn't changing on the Blogger homepage for each individual user

Resizing an image that is being pulled from a database

Having difficulties with Smooth Div Scroll and Colorbox integration

The functionality of Selenium's get(link) feature appears to be experiencing issues

Can you help me with sorting asynchronous line points for KineticJS?

Is Fullpage.js functioning only on local servers?

The md-autocomplete feature showcases search results in a list format rather than a dropdown menu

Tracking the User Interface efficiency of a Java Applet running on a website

Arranging five divs within one main div horizontally with equal margins between them

Organize pictures and words side by side on both sides at the same time

Is it possible to pass multiple IDs into document.getElementById?

Is the in-app browser of WeChat able to support self-signed HTTPS URLs?

Is it possible for a user to change the data stored in sessionStorage variables?

Is there a way to turn off predictive text for reCAPTCHA on my mobile device?

Is it possible to incorporate a next.js image onto the background design?

Using postMessage to communicate with the localstorage of an iframe from a separate domain