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:

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

Tips for enabling background scrolling when Popover is displayed: (React, React Native, Native-Base)

What is the best way to create a four-column layout using only CSS when the widths of the columns will vary?

Modifying SAS ODS contentitem in PROC SQL SELECT query

Transforming a Bootstrap Background Image to a Captivating Video Display

What is the best approach to display a fluctuating price depending on specific options chosen in Next.js?

I'm facing challenges with setting auto heights on CSS and aligning floating divs

Scrolling horizontally to display dynamic columns based on a search query in AngularJS

Example of Image Slider using AngularJS

Struggling with Internet Explorer?

"Utilize jQuery to target and highlight specific HTML elements when redirecting

What could be causing my handle button to slide off the timeline towards the right?

Is it possible to apply a CSS transform without erasing the existing transform?

What is the reason for the columns being divided on the xs-viewport in Bootstrap?

What's preventing my code from running the CSS class properly?

Exploring ways to cycle through an array of objects during a jQuery ajax request

What is the best way to collapse the entire navigation menu after clicking a link (nav-link) within it?

Exception Regarding Security in My Java Applet

Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

Should I use a tooltip or a pop-up for the tablet version?

What is the best way to implement a keypress event in this code?