Restrict the number of rows in a CSS grid

Hello there,

I am in the process of creating an image gallery using CSS grid. Specifically, my goal is to initially show just one row of images and then allow users to click a "Show more" button to reveal additional images.

You can see my progress here: https://stackblitz.com/edit/angular-96bdii?file=src%2Fapp%2Fgallery.component.ts

The issue I'm facing is that real images take longer to load completely compared to colored divs. This causes problems with the ngViewAfterInit hack since the total width isn't accurate when it's called. Additionally, the total width is calculated automatically by a flexbox layout, making it difficult to predict early on.

Do you have any suggestions for a better solution that utilizes advanced CSS grid techniques to limit the display to just one row?

Thank you for your help!

javascriptangularcsscss-grid

Answer №1

If you want to programmatically fetch your images, you can follow this approach:

var picture = new Image();
picture.onload = function() {
  //Extract the width using this.width
}
picture.src = 'http://www.example.com/photo.jpg';

You can then utilize this information to calculate the optimal width and determine picsPerRow

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

Here's a guide on how to package and send values in ReactJs bundles

I'm currently involved in a ReactJs project that does not rely on any API for data management. For bundling the React APP, we are using Webpack in the project. The challenge now is to make the React APP usable on any website by simply including the ...

javascriptreactjswebpack

A guide to presenting array data retrieved from an Ajax call within HTML using Laravel 4.1

I have an AJAX call to a controller that returns array data to my view. I want to display this array data in HTML upon clicking, but I'm not sure how to do it yet. Here's what I have so far: AJAX Call: request = $.ajax({ url: "/fans/ ...

javascriptphpjqueryajaxlaravel

What is the deal with CSS relative magnification?

I am currently utilizing a PHP styleswitcher along with alternate stylesheets in an attempt to replicate the functionality of browser zoom (done using keyboard shortcuts cmd-plus or ctrl-plus). At the moment, when clicking on the "zoom in" graphic, it is ...

csszooming

Choosing descendant elements in CSS styling

Is there a way to select child elements in sequence? For instance: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li> ...

htmlcss

What is the best way to utilize the async pipe along with @defer for efficiently loading and declaring variables in the template within Angular 17

One way I can accomplish this is by using @if. An example of this is: @if(items$ | async; as items), where I can assign the array of items to a variable named 'items' using the 'as' keyword in the template. Is there a similar approach ...

angularasynchronouspipedeferredangular-template

Comparing adjust-leading-to with leader in Compass - what sets them apart?

Currently exploring Compass and feeling a bit puzzled about the functionality of two mixins: adjust-leading-to and leader. Would appreciate it if someone could clarify the distinction between them. ...

csssasscompass-sass

What do I need to verify? An uncaught TypeError has occurred in the promise, indicating that the property 'MyFunctionName' cannot be read from an undefined URL

The issue arises solely in the compiled application, leading me to believe it's a browser-specific problem. However, I'm uncertain: I've inserted the following script into a webpage: async function exportChatAsXMLHelper(params){ let dis ...

javascriptvb6chromium-embedded

Troubleshooting issue with CSS `gap` property malfunctioning in conjunction with `display: block;` setting

I've run into an issue with the gap property in CSS not working as expected in my layout. After investigating, I found that some of my containers have display: block; set, which seems to be causing the gap property to be ineffective. My goal is to cre ...

htmlcssreactjs

Using recycled frame buffers in a threejs fragment shader

I'm currently working on a project to develop an app that emulates the effect of long exposure photography. The concept involves capturing the current frame from the webcam and overlaying it onto a canvas. As time progresses, the image will gradually ...

javascriptthree.jswebglfragment-shader

Incorporating a JavaScript library into Angular 7

I am looking to add Cleave.js and Rellax.js libraries to my project. Currently, I have successfully imported jQuery. These libraries require specific attributes in the HTML code. What is the best way to import these libraries? angular.json "scripts" ...

node.jsangular

Preventing Vue.js SPA from accessing cached version when JWT expires: the solution

I'm encountering an issue with my Vue.js / Express application that I can't seem to resolve. Here's how the process unfolds: An unauthenticated user logs into the app and is presented with the login page. Once successfully authenticated, t ...

javascriptexpressvue.jsjwt

Having trouble setting the backgroundImage in React?

Hi there! I'm in the process of crafting my portfolio website. My goal is to have a captivating background image on the main page, and once users navigate to other sections of the portfolio, I'd like the background to switch to a solid color. Alt ...

javascriptcssreactjscreate-react-app

Utilizing Node.js callback for validating JWT tokens

In my Node.js server, I have set up an authentication route to authenticate requests: app.get('/loggedin', auth, function(req, res){ console.log(req.authenticated); res.send(req.authenticated ? req.authenticated: false) }) From what I u ...

javascriptnode.jsexpressjwt

What is the best way to implement validation for a textfield to prevent submission if a negative value is entered?

I am working with a text field of type number and I have successfully set a minimum value of 0 to ensure that negative values are not accepted. However, I have encountered an issue where I am unable to delete the 0 once it is entered. Is there a way to fix ...

javascriptreactjsmaterial-ui

Angular button press

Recently, I started learning Angular and came across a challenge that I need help with. Here is the scenario: <button *ngIf="entryControlEnabled && !gateOpen" class="bottomButton red" (click)="openGate()">Open</button> <button *ngIf ...

javascriptangulartypescript

How can I showcase images stored in an array using JavaScript?

I am currently developing a role-playing game (RPG). In order to enhance the gameplay experience, I am trying to implement a for loop that will dynamically generate buttons on the screen. Here is the code snippet I have created so far: $(document).ready(f ...

javascripthtml

Assistance needed with incorporating an additional link button into the extensive menu

I recently checked out the impressive mega menus featured on the w3schools website. You can find them here: (https://www.w3schools.com/howto/howto_css_mega_menu.asp). While using the "try it yourself" option, I tried to experiment with adding another mega ...

htmlcssmegamenu

Why isn't margin working with position: fixed?

I need help finding a solution for incorporating margin in a box within my App class. The issue is that the position fixed property doesn't seem to work as intended. <div className="App"> <div className="box"> ...

htmlcss

Ways to align anchor tags in the middle of a DIV element?

<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);"> <div style="margin: 5px;"> <a href="#link">#down2#</a> </div> </div> This is the current code I am w ...

htmlcss

Execute an Angular 7 Single Page Application directly through the file:// protocol

I've been diving into tutorials on SPA and client-side routing, but I'm still struggling to grasp it fully. How can I configure the router to function without a web server? For example: file:///C:/cxr/CXR-WebViews/dist/CXR-WebViews/index.html#/p ...

angularangular2-routingsingle-page-application