Creating a versatile four-column design using CSS

Question

Creating a versatile four-column design using CSS

I am looking to retrieve data such as title, number, and date and display them in green boxes on my website. I want these boxes to be arranged in a single line, similar to the layout shown in this screenshot.

While ideally each line would contain 4 items, due to the dynamic nature of the number of boxes, I may only have two boxes per line.

It is important to me to maintain even spacing between the boxes, even when there are only 2 boxes present. Using { justify-content: space-between } does not work for me as it causes one box to stick to the right side of the page and the other to stick to the left. Additionally, using { margin-right } or { margin-left } is not suitable because when 4 boxes are present, I want them to align with the sides as they would with { justify-content: space-between }

Any assistance you can provide on this matter would be greatly appreciated.

PS: I primarily code in reactjs

javascript html css reactjs

Answer 1

Answer №1

To replicate the layout shown in the screenshot, you can utilize the CSS property display: grid. This method allows you to specify the size of each column relative to one another:

.boxcontainer{
  display: grid;                          /* Utilizes grid layout for columns */
  grid-template-columns: 1fr 1fr 1fr 1fr; /* Sets proportions of the columns */
  gap: 20px;                              /* Gap between elements instead of margin in .box */
}
.box{
  width: 100%;    /* Occupies full width of each column */
  height: 200px;  /* Can be adjusted as needed */
  background-color: red;
}

<div class="boxcontainer">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Answer 2

To replicate the layout shown in the screenshot, you can utilize the CSS property display: grid. This method allows you to specify the size of each column relative to one another:

.boxcontainer{
  display: grid;                          /* Utilizes grid layout for columns */
  grid-template-columns: 1fr 1fr 1fr 1fr; /* Sets proportions of the columns */
  gap: 20px;                              /* Gap between elements instead of margin in .box */
}
.box{
  width: 100%;    /* Occupies full width of each column */
  height: 200px;  /* Can be adjusted as needed */
  background-color: red;
}

<div class="boxcontainer">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Answer 3

Answer №2

To achieve your desired layout, utilize display:flex; and flex-wrap:wrap; for the Container while also applying padding:

.container{
  width:1000px;
  display:flex;
  padding:10px;
}
.box{
  width:200px;
  flex-wrap:wrap;
  height:200px;
  background-color:red;
  margin:20px;
}

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Answer 4

To achieve your desired layout, utilize display:flex; and flex-wrap:wrap; for the Container while also applying padding:

.container{
  width:1000px;
  display:flex;
  padding:10px;
}
.box{
  width:200px;
  flex-wrap:wrap;
  height:200px;
  background-color:red;
  margin:20px;
}

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Creating a versatile four-column design using CSS

Answer №1

Answer №2

Similar questions

The potential security threat posed by displaying a user's HTML content on a webpage restricted to only their viewing

Sending a parameter as text from .NET code-behind to a JavaScript function

Troubleshooting Issue: jQuery Hide/Show Functionality Not Behaving as Expected Inside If

Secure strings by utilizing an array of characters

Revise the div to be clickable

What is the best way to transfer values from a nested child component up to the parent component

Executing a shell command prior to the ENTRYPOINT in the dockerfile: Tips and guidelines

What is the best way to set a boolean value for a checkbox in a React project with Typescript?

Is it possible to upload numerous profiles into the MYSQL database using this WP template?

Is there a way for me to automatically retrieve lost data following a POST request?

Creating HTTP-only cookies within a NextJS middleware

React Bundle Error in Webpack

In a VueJS project, access an xlsx file stored in the public directory by reading its contents

Managing the status (e.g. 503) for Axios OPTIONS response

Exploring External Functions in Angular Beyond the Library

How can I improve the organization of my NPM scripts for better readability?

Displaying a profile hover card allows users to easily discover and choose whether to follow or explore

Which is more effective for a webpage that solely calculates a formula: user input fields in DIVs or forms?

Tooltip not appearing in designated spot as designed

Would like a modal to appear upon clicking a cell within a grid