Using Vue.js to showcase images in a horizontal layout (5 images per row)

I am trying to retrieve images from the service and display them horizontally, with a total of 10 images. My goal is to show the first five images in the first row and the next five images in the second row. Here is my current attempt:

<div style="margin-top: 5px;width: 100%;">
 <div style="display: flex">
    <ul v-for="(item,index) in body_content">
        <li style="width: 20%;display: inline">
          <img v-bind:src="item.title">
        </li>
        <br v-if="index > 6">
    </ul>
 </div>                                                                                
</div>

Unfortunately, this code is not functioning as expected. If you have any suggestions or solutions, please share them with me. Thank you!

htmlcssvue.jsvuejs2vue-component

Answer №1

To achieve a grid layout, leverage the display:grid and 

grid-template-columns:repeat(5,1fr)
properties as shown below:

<div style="margin-top: 5px;width: 100%;">

    <ul  style="display: grid;grid-template-columns:repeat(5,1fr);">
        <li v-for="(item,index) in body_content" style="width: 20%;display: inline" >
          <img v-bind:src="item.title">
        </li>
    </ul>
                                                                              
</div>

It is advisable to iterate over the li elements instead of the ul, and utilize class names to differentiate styles for better organization within the template.

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

Is it possible for me to input a variable into the logical process of if(isset($_FILES['whatever']))?

I have recently started learning PHP and I'm in the process of creating a dynamic page that will update based on which form buttons are clicked. The functionality is working correctly, but my goal is to enable users to upload multiple files - either P ...

phphtmlarraysbuttonmove-uploaded-file

Guide to parsing HTML tables using JavaScript

I have a set of HTML tables generated from a pandas data frame in the following format: list_html = [<table border="1" class="dataframe"> <thead> <tr style="text-align: right;"> <th></th> <th>score</th> &l ...

javascripthtmlarrayspandas

Using gulp to compile a Vue component without the need for `require` statements

I'm currently exploring the process of constructing a component with Gulp. Right now, I am working on a Vue component that has the following structure: my-component.vue <template> <div class="foo"> </div> </template> < ...

javascriptgulpvue.js

A step-by-step guide on generating a single chip using the same word in Angular

I'm trying to find a solution to ensure that only one chip is created from the same word inputted, instead of generating duplicates. Currently, users can input variations such as "apple," "APPLE," "apPPle," "aPpLe," and I want to automatically conver ...

htmlangularjsangulartypescriptangular-material

Changing CSS module variables through JavaScript programming

I'm currently utilizing an older version of react-boilerplate that includes CSS Modules, allowing for the creation of variables and the ability to import them into other CSS files. Below is my colors.css file: :root { /* Status colors */ --error ...

csspostcsscss-modulesreact-css-modulesreact-boilerplate

Adjusting Images and Icons' Sizes Automatically on a Single Line

Imagine a row of social media icons/images (like Facebook, Twitter, LinkedIn) displayed together. How can I ensure that when I add more icons/images to this row, their sizes adjust automatically to stay on the same line instead of moving to the next one? I ...

htmlcssimageicons

Is there a way to display the next/previous buttons separately from the scroller in my jQuery thumbnail scroller implementation?

Is there a method to display the next and previous buttons outside of the scroller frame when using jQuery thumbnail scroller by manos.malihu.gr? I have attempted to modify the button class in CSS to make them more prominent or visible, but unfortunately ...

javascriptjquerycssscroll

What causes the CSS width property to vary when using the display:inline property?

There is a piece of code that contains a <ul> element with the default css property display:block. Here is the code snippet: ul,li{ list-style-type:none; padding:0; /*display:inline;*/ } #parent{ width:100%; /*height:50px;*/ background-color ...

htmlcsshtml-listsdisplay

The issue with rendering CSS styles from <style></style> tags in Visual Studio while debugging in VB is causing a problem

<style> #ctrtable{width:600px;margin-left:auto;margin-right:auto;} </style> For the purpose of centering a table on the viewport, the above style block is added to the web page.   While using Visual Studio 2013 Express in debug mode, t ...

cssvb.netdebuggingwebvisual-studio-2013

What is the best way to route a Single Page Application in a separate route within an Express application that has

Imagine having a traditional blog built on Express, but now you want to add a Vue.js-powered blog content manager as a Single Page Application. You're looking to serve this new app from a unique route like https://myapp/admin/dashboard while keeping ...

node.jsvue.jsexpresssingle-page-applicationmulti-page-application

How come the font size and div elements combine when I drag and drop the items?

Recently, I decided to create my own drag and drop game. The game is almost complete, but there's one issue. When I try to drop the items into the designated "Drop Items Here" area, their style changes abruptly to mimic the text. For example: https: ...

javascripthtmlcss

Display or conceal elements based on the screen size using Bootstrap 3 classes

While this may seem straightforward for some, the reality is quite different. I have two images that need to be displayed based on screen size. In my HTML code, I used classes like hidden-md, hidden-sm, and hidden-xs assuming they would only show on larg ...

htmlcsstwitter-bootstrap

Stopping Vue Router from re-rendering the page: Is it possible?

I am having an issue with my News.vue and News-View.vue. Whenever I navigate to news/1, it directs me to the News-View.vue page. The problem arises when there are multiple search filters (such as category, date, etc.) and infinite scroll implemented in the ...

vue.js

Customizing checkbox appearance without including a label

After following a tutorial on how to style checkboxes found here, I was able to create a custom styled checkbox. However, I noticed that when I removed the label from the checkbox, it disappeared and was no longer visible. Is there a way to display the c ...

htmlcsscheckbox

Using AJAX to Access PHP Variables

I am working on creating a progress bar and have the following CSS code: #result{ background:#8c8f91; margin-left: 15px; margin-right: auto; table-layout: fixed; border-collapse: collapse; z-index: -1; position:relative; width: ...

phpjquerycssajax

What is the process for implementing a grid with 5 columns on larger screens and 2 columns on smaller screens using reactjs?

I am currently working on building a Grid using material UI and reactJs. I found the guidelines on this link https://mui.com/system/react-grid/. However, there seems to be an issue with creating 5 columns in the grid. I attempted to create a custom grid ...

javascriptcssreactjsmaterial-ui

Implementing Ajax Js to search within a specific div - reducing text overload on the page

Our e-shop on Prestashop requires an Ajax search feature to find compatible batteries and adapters on the page. Here is the code I have created: https://jsfiddle.net/fgfjo2n9/ I am facing two issues: • 1st I want the output to only display the heading ...

javascriptjqueryhtmlajaxsearch

Issue with Hiding Bootstrap Tabbed Content Correctly

I am currently struggling to make a Bootstrap tab field function correctly, encountering some obstacles along the way. While the content is successfully tabbing between each div, the issue I'm facing is that the content from each tab is actually bein ...

jquerycsstwitter-bootstrap

Tips for designing a table with a stationary first column in HTML/CSS

I am looking to design a table that can be horizontally scrolled with a dynamic number of columns. The goal is to keep the first column fixed/frozen while scrolling horizontally. I attempted to achieve this using the following CSS, which successfully keeps ...

htmlcsshtml-tablecss-tables

Press the div, excluding the button - Vue

I have a basic div that spans 100% of the width, containing a button inside. The issue I'm facing is that when I add a click event to the div, the entire div becomes clickable (including the button within it). What I want is for the whole div to be ...

javascriptcssvue.jsvuejs2vuejs3