versatile grid tiles with CSS flexibility

Trying to remove the svg elements while keeping the grid layout intact.

The svgs are used to maintain a 1:1 aspect ratio for all tiles.

UPDATE: Discovered a CSS Solution for this.

Simply set aspect-ratio: 1 for the tiles.

Is there an alternative solution to achieve this without using the svg hack?

body>div {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  min-width: 700px
}

div div {
  background: red;
}
<div>
  <div><svg viewBox="0 0 1 1"></svg></div>
  ... (omitted for brevity)
</div>

Answer №1

To maintain aspect ratio while scaling, you can set the width and height to the same value. One approach is to utilize viewport width or height.

div
{
  width: 25vw;
  height: 25vw;
  max-width: 250px;
  max-height: 250px;
  background: red;
  display: inline-block;
  vertical-align: top;
  margin: 5px;
}
<div></div>
<div></div>
<div></div>
...
<div></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

FullCalendar fails to load in Bootstrap 4 tab

My current project involves utilizing Bootstrap 4 tabs, and I encountered an issue with displaying a FullCalendar on the second tab. Specifically, I am using version 5.2.0 of the FullCalendar library. While the calendar functions correctly when placed on t ...

Personalized HTML Selection Arrow Graphic

I am seeking a solution to hide the default arrow of the HTML select list and instead add a custom image (arrow) to the list. https://i.sstatic.net/HF7vO.png .form-inline select { margin: 10px 35px 15px 0px; background-color: #fff ...

The art of rotating PDF files and various image formats

Looking for a way to rotate PDF and image files displayed on an HTML page using jQuery. I attempted: adding a CSS class - without success. Here is an example code snippet: .rotate90 { webkit-transform: rotate(90deg); moz-transform: rotate(90de ...

how to load CSS and JS files on certain views in Laravel 5.2

Currently, I am facing a situation where I need to ensure that the CSS and JS files are loaded only on specific views in Laravel 5.2. Due to my boss's decision to eliminate RequireJS for loading JS files on our blade templates, we are now exploring a ...

Displaying a loading animation within a specific div element

Is it possible to use jQuery to insert a div into another div? My goal is to replace the contents of one div with a loading div while waiting for an ajax call to return. <div id="content1">foo</div> <div id="content2">bar</div> < ...

Why does replacing <input> with <TextField> in Material-UI & React cause the form submission to fail?

Recently, I encountered an issue with my CRUD Todo app's form for adding tasks. Initially built with a basic HTML input and button setup, I decided to enhance the design using Material-UI components. After introducing <TextField> in place of th ...

Unable to modify the CSS properties of the titlebar in jQuery UI dialog

Is there a way to modify the background color of a jQuery UI dialog titlebar? Here is the code I am using: jQuery("#divId").dialog({ title: 'Information' }); jQuery("#divId .ui-dialog-titlebar").css("background-color", "red"); For m ...

What's the key ingredient I need to add for a dropdown navigation menu?

What am I overlooking in my HTML and CSS coding to create a standard list dropdown in my navigation menu? When I preview this section of the page in Chrome and IE, the navigation area appears fine until I hover over the Fishing and Guides link. Instead of ...

Horizontal rule spans the full width of the content, appearing within an ordered list

Check out this example to see the issue with the horizontal rule not extending all the way across under the number. I've tried using list-style-position:inside;, but that interferes with positioning the number correctly due to the left image being flo ...

Stop all animations in JS and CSS

Looking for a way to halt all CSS and JavaScript animations, including canvas and webGL effects, on a specific webpage. Some animations can cause slow performance on certain browsers like Opera and Firefox, so I'm seeking a code snippet or guidance o ...

drag and drop feature paired with additional textarea below

query 1: How can I make the bottom-left textarea move together with the top-left textarea when I drag it down? query 2: What is the solution to prevent the left-bottom textarea from moving when I drag down the top-right textarea? http://jsfiddle.net/4BX6 ...

Mastering the integration of Sass with NextJS

After successfully styling my NextJS app with SCSS modules, I encountered an unexpected error when I returned to work on it later: Syntax error: Invalid CSS after "...ound: variables": expected expression (e.g. 1px, bold), was ".$main-gradie ...

Struggling to create a photo grid design that meets my expectations

I'm struggling to recreate this particular photo grid. Any tips on how I can achieve it? Check out the image here Just to clarify, I had a working prototype see image description using flexbox. However, one image didn't fit well so I resorted to ...

Utilizing the '<' or '>' operator in combination with an if statement within a Repeater component

Is it possible to use an if statement in a repeater like this? <%#Eval("FN").ToString().Count > 0 ? "SB" : "" %> When I try to implement this, I receive an error 73 indicating that the > operator cannot be used. How can I adjust it so that i ...

Updating dropdown selection with JavaScript

I have a dropdown select menu with two options. I am using JavaScript to retrieve the selected value from the drop-down menu and display it in a text area. Here is my code: $(document).ready(function () { $('#pdSev').change(function () { ...

Firefox is giving me trouble with my CSS/JS code, but Chrome seems to be working

Having some trouble with this code - it seems to be working fine in most browsers, but Firefox is giving me a headache. I've tried using the moz abbreviations in CSS and JS tweaks, but no luck. Is there a property that Mozilla Firefox doesn't sup ...

Is it possible to utilize the onClick event while preserving the use of "this" within the function it triggers?

There is a project with specific needs that require implementation. The task involves adding points to the total score when a button is clicked, without making any changes to the provided HTML code. This requires writing unobtrusive JavaScript code by atta ...

Tips for personalizing and adjusting the color scheme of a menu in ant design

I am currently working on a website using reactJs and ant design. However, I have encountered an issue with changing the color of a menu item when it is selected or hovered over. Here's the current menu: Menu Image I would like to change the white col ...

How can you make an object float above an image using CSS?

Is CSS capable of positioning an object over an image? I am trying to overlay a form on top of an image that is not a background. Floating the form doesn't achieve the desired effect, so I'm wondering if there is another way to accomplish this. ...

Displaying altered textContent

I am working with an SVG stored as a string and making some adjustments to it. The final result is being displayed as text within targetDiv. <html lang="en"> <head> <title>Output Modified</title> </head> <body> ...