Photo collection showcasing images in separate lines, created with a single div element per row

Currently, I am studying Scss and experimenting with creating an Image gallery using SASS.

I am attempting to utilize only one div tag for the entire image gallery as a row, avoiding the need for a new div for each row.

Would it be feasible to achieve this by taking only one div as a row and styling the rows accordingly?

Your suggestions on optimizing this process would be highly appreciated.

<div class="image-gallery-items">
  <div class="image-gallery-item">
    <a href="" class="thumbnail">
      <img src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
    </a>
  </div>
  (repeated image gallery items)
</div>

As seen from the code above, all images are currently displayed in a single line. How can I improve this layout?

htmlcsssassflexboxcss-selectors

Answer №1

You can utilize flexbox to achieve this functionality! Flexbox allows for wrapping elements that exceed the width of their parent container. Below is an example demonstrating how the wrapping works.

To implement this, I added "display: flex;" and "flex-wrap: wrap;" to the parent element (.image-gallery-items). This will ensure that child elements are displayed in rows and automatically overflow/wrap to the next row if they exceed the parent's width.

.image-gallery-items {
  display: flex;
  flex-wrap: wrap;
  background: #ccc;
  width: 600px;
}

.image-gallery-item img {
  width: 190px;
  height: auto;
  padding: 5px;
}
<div class="image-gallery-items">
          <div class="image-gallery-item">
              <a href="" class="thumbnail">
              <img
                src="https://images.unsplash.com/photo-1589682642146-26ac8262b3c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80">
            </a>
          </div>
          // Additional image gallery items here...
        </div>

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

Popover disappears when scrolling the page, but its position remains constant in Angular 4+

After clicking on an icon, a popover appears. I've noticed that the popover has a delay set, but when I scroll, the popover also moves along with it. Is there a way to keep the popover in place and not have it affected by scrolling? <md-badge cla ...

htmlcssangularpopover

Hiding and displaying elements using jQuery for printed output

Is it possible to customize the show and hide properties of JQuery for different media types (e.g., screen and print)? For instance, I have two divs and a button that toggles between showing and hiding one div while displaying the other. However, when it ...

jquerycssshow-hide

An innovative approach to loading tabs dynamically using Materialize CSS

I have a situation where I am dynamically generating a set of tabs when the page loads, but for some reason the on function is not recognizing it. How can I fix this issue? Here is the current code: HTML <div class="row"> <div class="col s12 ...

jquerycss

Unable to eliminate the margin on the box

I am struggling to align 2 divs side by side due to a margin that one of the divs has, and I cannot remove it. .middleHolder{ padding: 0px !important; } body{ font-family: Raleway, sans-serif; } .numberedTitle{ font-family: Roboto, sans-serif; font-si ...

htmlcsstwitter-bootstrapmarginbootstrap-4

Is there a way to create distance between these icons?

<div id="unique-icons"> <a href="#"> <img class="github-logo1" src="GitHub-Mark-64px.png" alt="first github logo"> </a> <a href="#"> <i ...

htmlcssicons

Steps for rearranging the Bootstrap carousel

I am looking to rearrange the carousal indicators so that they show up below the caption. You can view a demonstration of the carousel in action by visiting the following fiddle: <pre> https://jsfiddle.net/w1jjeh7L/ </pre> My goal is to a ...

jqueryhtmlcsstwitter-bootstrap-3

Create a sleek Bootstrap 4 webpage featuring a fixed footer and navigation bar. However, the challenge lies in ensuring that the content fills the

Currently, I am in the process of creating a template page that includes a navbar and a footer with the intention of adding additional columns within the main div (container-fluid) at a later stage. However, I have encountered two issues that I cannot seem ...

cssbootstrap-4

Choose the immediate sibling located right after a specific element

My goal is to have the second paragraph following a h1 element display a dropcap, with the first being reserved for the author and date. Although I've tried using different CSS combinations like h1 + p::first-letter {}, it only affects the first para ...

css

Converting data from an HTML file to JSON with the help of <input file> feature in Javascript (Vue)

Currently, I am attempting to upload an HTM file using in Vue. Within this file, there is a styled table utilizing , and other HTML elements... I am curious, is it feasible to extract the tabulated data from the HTM file and convert it into another forma ...

javascripthtmlvue.jsinput

Customizing the appearance of the dragged element in jQuery UI

Is there a way to modify the color of a draggable list item after it has been dragged? Any assistance is greatly appreciated. $("#DragWordList li").draggable({helper: 'clone'}); ...

cssjquery-ui

Select an item from the options available

Looking to automatically select a specific item from a combobox upon clicking a button on my webpage. The page includes both PHP and JavaScript code for this functionality. Currently, I have a JavaScript function triggered by the "onclick" event of the bu ...

phpjavascripthtml

What prompted Laravel to encase my sidebar within an <em> element?

**Utilizing Laravel 5.8.31 & Bootstrap 4. Browsers: Chrome v. 76.0.3 and Opera 62.0.33 ** During my CRUD function testing, I encountered an issue after deleting a post. Following the deletion, the controller redirected back to the post index page. How ...

phphtmllaravel-5bootstrap-4

What is the best way to position the bottom block?

I'm trying to create a template that looks like the image below: https://i.sstatic.net/m6q0s.png I managed to position the top square correctly, but I'm having trouble aligning the bottom one - I can't seem to move it to the bottom left co ...

htmlcss

Determining the dimensions of knockout-rendered elements

I've implemented knockout to display a list of clickable elements functioning as radio buttons. However, when too many elements are added horizontally, it overflows off the page. Currently, I'm breaking them into multiple rows, but this doesn&apo ...

javascriptjqueryhtmlcssknockout.js

The curly braces in AngularJS are failing to display the values on the HTML page

After trying various articles and solutions to different questions, I am still unable to resolve my issue. I am working on a blank ionic project and it is running smoothly in my browser using ionic serve without any errors. However, instead of displaying ...

javascripthtmlangularjsionic-framework

Using the Petite-vue Initialization attribute within an HTML script tag

I came across a snippet of Vue.js code on Twitter from Evan You, but I'm confused about the purpose of the init attribute in the script tag. I've searched on MDN and other sites but couldn't find any information about it. However, I do unde ...

javascripthtmlvue.jsvuejs3petite-vue

Bootstrap not recognizing jQuery despite jQuery being present

I'm currently working on an HTML project that involves using jQuery, Bootstrap, and jQuery easing. However, I've encountered some errors while testing the code: bootstrap.min.js:6 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. ...

javascripthtmljquerybootstrap-4

What is the best way to mirror an SVG path within an HTML document?

I'm looking to use an icon from bootstrap, but I need it flipped vertically: What I actually need is an arrow-right-left, where the top arrow points to the right. I attempted to flip it using transform="scale(-1 1) translate(-1260 0)", but ...

htmltwitter-bootstrapsvgpath

Altering the color of a div based on a specified value condition

I am in need of assistance with a div structure similar to this: <div id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable ></div> <div id="position" tabindex="1" class="filled-text" placeholder="Input ...

javascriptjqueryhtmlcsstwitter-bootstrap

Three columns with the first column having a flexible width

On various coding forums, I've come across multiple examples using floats, but none have provided a solution for my specific issue. I have three column divs with varying widths - the first column is dynamic while the other two are fixed. Looking for a ...

csslayout