Creating a CSS grid with uniform row heights, each adjusting independently

I'm currently working on creating a CSS grid for a product display. My goal is to have rows with equal heights, but each row should adjust its height based on the tallest column within that specific row. Right now I have all rows set to be the same height using the following CSS:

grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
display: grid;

However, I am struggling to figure out how to make each row dynamically adjust its height based on the tallest column in that row. Any suggestions or tips on how to achieve this would be greatly appreciated.

I hope that explanation makes sense!

csscss-grid

Answer №1

In order to fix the issue, you should either delete the line grid-auto-rows: 1fr; or replace it with auto (grid-auto-rows: auto;)

Take a look at this example for reference:- https://codepen.io/rvtech/pen/qBaGEoW

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

Draggable slider not functioning properly with linear interpolation

Recently, I've been delving into the world of "linear interpolation" and its application in creating easing effects. However, while the easing functionality of the draggable slider seems to be operational, I'm encountering an issue. The slider re ...

javascripthtmlcsssliderlerp

What are the steps to achieve a smooth transition from a background-image to transparency?

Take a look at this related image: The goal is to replicate the design shown on the right side of the image. However, there's also a parent container with its own background image, as opposed to a solid color. Any guidance on how to achieve this? U ...

imagehtmlcssopacity

Switching Symbols with JQuery

Hello, I am brand new to utilizing javascript and I'm currently experimenting with the toggle function. My goal is to create show/hide functionality while also toggling arrow icons. Specifically, I want a right arrow next to the link "More -->" and ...

javascriptjqueryhtmlcss

Tips for implementing a sticky sidebar in HTML5 with jQuery

I currently have two files: index.php and aside.php. I've already created the contents of aside.php. Now, I want to make the aside page sticky. To achieve this, I referred to the following link: http://codepen.io/pouretrebelle/pen/yvcBz My struggle ...

jqueryhtmlcss

css readonly input textbox not changing background color when set

I've come across an old Classic ASP form that requires additional functionality, and I'm currently using IE11. To address this, I decided to include a doctype like so (even though I'm unsure of its necessity): <!DOCTYPE html> In my C ...

htmlcssreadonly-attribute

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

javascripthtmlcss

fixed width div with width proportion

experts. I'm currently experimenting with a spinning cube effect for my gallery and I recently came across Paul Hayes' experimental cube on his website (it's best viewed in Google Chrome). However, I am facing a challenge in getting it to w ...

csshtml3d

The function fromEvent is throwing an error stating that the property does not exist on the type 'Event'

I'm attempting to adjust the position of an element based on the cursor's location. Here is the code I am currently using: this.ngZone.runOutsideAngular(() => { fromEvent(window, 'mousemove').pipe( filter(() => this.hove ...

htmlcssangular

Encountered an issue locating the stylesheet file 'css/style.css' that is supposed to be linked from the template. This error occurred when trying to integrate Bootstrap with Angular

<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css"> <link rel="stylesheet" href="plugins/magnific-pop ...

cssangularangular2-bootstrapping

concealing the upper header while scrolling and shifting the primary header upwards

Is there a way to use CSS to move the main header navigation, including the logo and links, on my website up when scrolling down in order to hide the top black bar header that contains contact information? The website in question is atm.truenorthmediasol ...

javascripthtmlcsswordpress

Sliding in the wrong direction on Bootstrap 5.2 carousel

I'm currently working on a carousel project. However, I encountered an issue where the images slide down initially and then jump up to the correct level as depicted in the image below. I've tried adjusting the height, width, and auto settings to ...

htmlcsscarouselbootstrap-5

How can I use ontouchstart and ontouchend events in jQuery?

Currently, I am using the following code to change the class of elements on touch: ontouchstart="$(this).addClass('select');" ontouchend="$(this).removeClass('select');" I was wondering if there is a more efficient way to achieve this ...

jquerycsshtmltouch

How should one go about properly sizing and formatting image icons?

Currently, I'm exploring the most efficient ways to optimize image loading speed on a webpage. Specifically, I am looking for advice on the best method for resizing an image from 1600x900 to 890x500. Method 1 Utilize the following code: <img src= ...

htmlcssimage

Struggling with Duplicated Images

Currently working on a website using only HTML and CSS. I am still learning the ropes in this area. My goal is to create a layout with a header, body, and footer that repeat to fill up the entire page, similar to envato.com. Here is a snippet of the code I ...

csshtml

Best practices for displaying output in Python Flask after submitting an HTML form

Embarking on my first web development project, I delved into Flask. Recently, I created a basic temperature converter, running it on my local host. The webpage featured a form input for entering a value, two radio buttons for selecting Fahrenheit or Celsiu ...

pythonhtmlcssflaskpython-requests

Creating a unique look for SELECT (Option) tags using gradients and a personalized arrow design

Feel free to check out my full HTML code here. You can simply copy and paste it into a demo document on your local machine to see exactly what I'm talking about. My goal is to style the boxes to include both a gradient background AND a unique arrow o ...

cssdrop-down-menugradient

How to center align a button in the footer of a Bootstrap card

I'm currently using Bootstrap 5.1.3 and facing a challenge in centering a button within the footer of a card. Below is the code snippet I am working with: CSS .btnStandard { min-width: 10vw; } HTML <div class="card-footer justify-content- ...

htmlcssbootstrap-5

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

javascriptphphtmlcsskirby

Ways to turn off Bootstrap links hover background color?

I recently added a Bootstrap menu to my website that I'm currently working on. I am curious about how to disable the hover background color for Bootstrap links. Here's the situation: Below is an example of the menu I implemented: Currently, whe ...

htmlcsshyperlinkhoverbackground-color

Creating time input forms that are responsive can be achieved by leveraging the features of Bootstrap

Currently, I am working on a Laravel project and I am facing an issue with making a form responsive. I have added the following viewport meta tag, but I have not seen any changes. Any suggestions on how to make this form responsive would be greatly appreci ...

htmlcsstwitter-bootstrapbootstrap-4responsive