Utilizing flex containers to strategically position boxes

My goal is to achieve a design similar to the image below:

https://i.sstatic.net/286GX.png

I have been advised to use Flexbox for this design. Despite trying various approaches, I am struggling to maintain consistent box sizes. I have a dataset called data which contains all the necessary information:

[
  {
    "name": "action",
    "img": "action.jpg",
    "status": "NO"
  }
  {
    "name": "Aldi",
    "img": "aldi.jpg",
    "status": "YES"
  }
]

The part that is tripping me up the most is the CSS. I can't figure out how to keep the boxes separate. I have created a main div with a gray background and attempted to loop through the data to create a flexbox for each item but it doesn't display correctly. I feel like I'm approaching the problem in the wrong way. Can someone demonstrate how to create these boxes for each element of the data? Please exclude instructions on creating the button, as I'd like to try that myself. My main struggle lies in styling the body of the blocks.

htmlcssvue.jsvuejs2

Answer №1

From what I can see, you seem to have a layout similar to this. Keep in mind that the flex property may need to be adjusted for different screen sizes. Using Bootstrap's row and columns can be helpful if it's part of your project.

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 0;
  background: rgba(0, 0, 0, 0.1);
}

.item {
  flex: 0 0 25%;
  list-style: none;
}

.item > div {
  height: 120px;
  margin: 1rem; 
  background: rgba(250, 250, 250, 1);
}
<ul class="wrapper">
  <li class="item">
    <div></div>
  </li>
  <li class="item">
    <div></div>
  </li>
  <li class="item">
    <div></div>
  </li>
  <li class="item">
    <div></div>
  </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Importing text data from a text file in Java or jQuery without the need for a web server

I've attempted to utilize both the jQuery.Get() and $.Get() methods for this task, but they don't seem to be working as expected. <head> <script type="text/javascript" src="jquery-2.1.3.min.js" > </script> <script lang ...

javajavascriptjqueryhtml

Retrieving information from a dynamically generated HTML table using PHP

I have successfully implemented functionality using JavaScript to dynamically add new rows to a table. However, I am facing a challenge in accessing the data from these dynamically created rows in PHP for database insertion. Below, you will find the HTML ...

javascriptphpjqueryhtmlcss

Position the Figcaption over the Image

Running a website, I am facing an issue with adding copyright information to the top-left corner of an image. The img element is set to float:left; and the figcaption appears after it. However, there are some complications: 1) Using the position:absolute ...

htmlcssimage

What is the best way to retrieve the content of a specific class in Selenium WebDriver?

Python Code : from selenium import webdriver from selenium.webdriver.chrome.options import Options options = webdriver.ChromeOptions() options.add_argument(r"--user-data-dir=C:\Users\bji\AppData\Local\Google\Chrome\ ...

htmlcssseleniumselenium-webdriver

Having some trouble with the JS code, so I decided to switch gears and focus on demonstrating some CSS concepts in

After spending around 3-4 hours trying to fix a demo using JS and CSS, I finally found half of the solution. Despite adding the CSS directly to the element which worked fine, I encountered issues when attempting to use JS. I downloaded the jquery-1.11.3.j ...

javascriptjquerycssvisual-studio-code

Setting up the Bootstrap grid structure

Struggling to find the right configuration for this Bootstrap 3 setup... https://i.stack.imgur.com/ZsTdI.png I have an input field, but I'm having trouble placing the image in that position. <div class="row"> <div class="col-sm-4 col-m ...

csshtmltwitter-bootstrapgrid

Is there a way to convert various elements sharing the same class into a list of array items?

Essentially, I am dealing with multiple elements sharing the same class name. My goal is to retrieve an array of integers from an API and then iterate through each element with this class name, replacing them with elements from the array sequentially. For ...

javascripthtmlarraysclassweb

Fixed headers remain in place as you scroll horizontally on a single table

Within my system, I have organized two tables: table one and table 2 are stacked on top of each other. I've managed to freeze the column headers so that they are displayed vertically, remaining static as users scroll horizontally. To achieve this effe ...

htmlcssangular

The process of webpack compiling a Vue.js project

Regarding webpack and vue.js usage, I am curious about how webpack builds a project when the npm run build command is executed. It is my understanding that a build folder must be included in the project with config files, and an output folder named dist is ...

vue.jswebpackvuejs2webpack-dev-serverwebpack-4

In mobile view, the carousel items slide downward

When the screen is at mobile resolution, the carousel items shift downwards View image description herebootstrap carousel View image description here <div class="container"> <div id="carouselExampleCaptions" class=& ...

htmlbootstrap-4

Vuetify 3 does not display dialogs

I am attempting to integrate vuetify 3.alpha with vue 3. Below are the files I am working with: Temp.vue (obtained from vuetify example) <template> <div class="text-center"> <v-dialog v-model="dialog" w ...

typescriptvue.jsvuetify.jsvuejs3vuetifyjs3

What is the process for switching the default font in Vuetify from Roboto to a different typeface for all elements?

Is there a way to update the font for all elements in Vuetify from Roboto to another option? I am currently using Vuetify, which comes with the default Roboto font. However, I would like to switch it to a different font. Modifying the font in the variable ...

vue.jsfontsvuetify.js

How to style the first column of the first row in a table using CSS without affecting nested tables

Having some challenges with CSS selectors, I'm hoping to find some assistance here. Presented with HTML code that resembles the following: <table class=myTable> <tr> <td>this is the td of interest</td> </tr> ...

css

Need a quick guide on updating the entire data property of a Vue component with a new object while maintaining reactivity?

I have a question that I couldn't seem to find an answer to, so I apologize in advance if it has been asked before. In my Vue component, which is written using vue-property-decorator in a class-based manner, I have a data property that is an object: ...

vue.jsvuejs2

Unforeseen Issues Arising from Media Queries

Trying out some new styling for different screen sizes based on the bootstrap grid system dimensions. Facing an issue where only certain styles apply while others don't seem to take effect. Here's a snippet of the CSS: @media only screen and ( ...

htmlcsstwitter-bootstrap

What is the best way to update the text on buttons once they've been clicked for a variety of buttons

I'm encountering an issue with multiple buttons where clicking on any button causes the text to change on the first button, rather than the one I actually clicked on. All buttons have the same id, and using different ids for each button seems impracti ...

javascriptjqueryhtml

The search engine results page (SERP) is only displaying the homepage and not any of the subpages

Check out this search to see that only my main page is indexed. Why aren't Google and other search engines picking up arda-maps.org/about/ and the other subpages? Is my deep linking technique incorrect? Do the search engines just need more time? If s ...

javascripthtmlajaxseogoogle-search

What is the best way to retrieve all label values of DOM elements from an HTML file using C#?

My goal is to open an HTML file, scan all the DOM elements with labels, translate those label values into another language, and save the modified file in a different location. ...

c#htmlasp.net

Tips for exporting an image from a threeJS scene

I am looking to export a 2D image of my scene by simply clicking a button on my HTML page. I have tried adding some code to my function, but unfortunately, it doesn't seem to work and the image is not downloading. (I am using Chrome as my browser) con ...

javascripthtmlthree.js3dexport

Combining backend webpack with Vue-CLI 3 for seamless integration

As I work on a full-stack application with Vue-CLI 3, the backend side is built in TypeScript which requires compilation. Currently, I am running the backend app directly using ts-node, but I am looking for a cleaner solution to bundle the backend code int ...

vue.js