Arrange SVGs using CSS in a grid with offsets

My current project involves creating a background using SVGs in React.

I'm looking for an easy CSS method to arrange these icons in a grid, possibly with an offset for the second row.

I also need the width of the icons to be dynamic so that they adjust according to the screen width.

While I know how to achieve this using javascript, I'm curious if there's a simpler CSS approach available.

At present, the icons are displayed in a single row.

.bg-icons{
    z-index: 1;
    position: absolute;
    height: 200px;
    overflow: visible;

    svg{
        font-size: 4em;
        margin: 20px;
        opacity: 0.05;
    }
}

https://i.sstatic.net/dRiK4.png

javascriptcssreactjs

Answer №1

Utilize flexbox to create a visually appealing layout by arranging columns and positioning every odd or even child element at the beginning, center, or end of each column.

.bg-icons{
    z-index: 0;
    position: absolute;
    height: 100px;
    overflow: hidden;
    width: 220px;
    background-color: lightgreen;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    justify-content: space-between;
}

svg {
  align-self: end;
  flex-grow: 1;
  flex-basis: 20%;
  margin: 1px;
  opacity: 0.5;
}
svg:nth-child(odd) {
  align-self: center;
}
<div class="bg-icons">
  <svg height="20" width="20">
    <circle cx="10" cy="10" r="10" fill="pink" />
  </svg>
  <svg height="20" width="20">
    <circle cx="10" cy="10" r="10" fill="pink" />
  </svg>
  <!-- More SVG elements 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

Can Threejs enable us to assign unique colors to each face of a cube?

// In this code snippet, we are loading a mesh and adding it to the scene. var loader = new THREE.JSONLoader(); loader.load( "models/cubic.js", function(geometry){ var material = new THREE.MeshLambertMaterial({color: 0x55B66 ...

javascriptthree.js

Discover how to efficiently load and display a JSON array or object using JavaScript

I am new to learning about json and d3, having just started a few hours ago. While I have basic knowledge of javascript, I need help with loading a json file and displaying all the arrays and objects on the console using d3. I tried to do it myself but unf ...

javascriptjsonobjectd3.jsload

Why is data fetching not working in NextJS with SWR and Supabase?

The problem I'm facing involves data fetching, and I can't seem to figure it out. Despite checking a third-party API for the data from the URL, I'm unable to make any manipulations that work. Below is my component code: import { supabase } ...

reactjsnext.jssupabase

Obtain the index by clicking on an element within an HTMLCollection

Within my HTML code, I have 9 <div> elements with the class ".square". I am looking to make these divs clickable in order to track how many times each one is clicked and store that information in an array. For example, if the fifth <div> is c ...

javascripthtml

Upon sending a POST request to http://localhost:5000/getData, a 404 error (Not Found) was encountered while using axios

As a newcomer to react and node.js, I have set up a fake server running on port 5000 with an API (http://localhost:5000/getData) that contains a hardcoded array of objects. My goal is to add a new object to this API from my react frontend running on port 3 ...

javascriptnode.jsreactjsaxioshttprequest

Ways to classify the prop type of a functional component by specifying the different types of props for the FC

I have created two functional components that require different prop types. export interface OrderImageProps { orders: ICartItem[] } const OrderImage: React.FC<OrderImageProps> = (props: OrderImageProps) => { return ( <div> ...

javascriptreactjstypescriptreact-props

Can you save data entered by a user into a text file using JavaScript or a similar technology in HTML, without the need to send it to a server?

Is there a way to create a site where user data is inputted into an input box or form, and then that information is stored in a .txt file on the user's C drive without uploading it to a server first? I've been experimenting with various forms an ...

javascriptphphtml

What is the best way to incorporate rounded images into a Bootstrap carousel?

Struggling to display only the rounded images when using a bootstrap carousel. Even with overflow:hidden, it's not working as intended. Seeking assistance on how to achieve this! ...

htmlcssbootstrap-4carousel

Transferring information between AngularJS and Express/Node without using AJAX

My application is built using AngularJS on a node/express backend, with user authentication handled by passport. After a user signs in or signs up, the communication between my Angular controllers and express is done through $http ajax/xhr calls. The form ...

javascriptnode.jsangularjsexpress

Dynamic Updating with useEffect

import * as React from "react"; // import "./style.css"; export default function App() { let [width, setWidth] = React.useState(window.innerWidth); let [height, setHeight] = React.useState(window.innerHeight); React. ...

reactjsreact-hooks

AngularJS right-click menu

I need a context-menu directive that can provide information on the clicked element for proper reaction. Although I experimented with this module, I'm facing an issue in uniquely identifying the clicked element. This is hindering my ability to apply ...

javascriptangularjstwitter-bootstrap

Encountered difficulties logging in with MongoDB and Node.js

I encountered an issue while attempting to authenticate a user using MongoDB and Node.js. Although no errors are thrown, the system fails to provide the expected data after the user logs in. Below is a breakdown of my code. server.js var port=8888; va ...

javascriptnode.jsmongodbmongojs

Having trouble with the JQuery click function not responding as expected

I want to create a button that, once clicked in the center, will cause all elements within a div to slide upwards. $(document).ready(function() { $("#imgs").click(function() { $("#start").animate({ bottom: "+=250px" }, "slow"); }); }); ...

jqueryhtmlcss

Unable to access array elements that were declared earlier for use in the render method in ReactJS

I've received an array from an API using fetch and stored it in a variable called "ids". However, I'm encountering an issue where the "ids" variable appears to be empty when rendered. How can I view the values that were previously assigned to the ...

node.jsreactjsexpressfetch

Ways to modify the input value to appear as subscript

Is there a way in React for my handleChange function to change the input value to subscript? class App extends Component { state = { equation: "" }; handleChange = event => { this.setState({ [event.target.name]: event.target.value }); ...

reactjs

Embed hyperlinks in a haml layout

I created a custom template called "_list_two_lines" %ul{:style=>"padding-top: 0; margin-top: 0"} - content.each do |element| %li{:style=>"font-family: Roboto, sans-serif; color: #333;font-weight: 300; font-size: 14px; "} &#10003; ...

htmlcsshaml

Creating an AJAX request in Knockout.js

Forgive me if this question has been asked previously, as my search attempts have been unsuccessful in finding a solution. Despite consulting the knockout documentation, I still struggle to articulate my issue effectively for searching. My situation invol ...

javascriptajaxknockout.js

What is the best way to add conditional styling to the home page item button in a React application?

Utilizing react alongside Material UI to display a navigation bar, I am attempting to dynamically apply styles to the selected menu item based on the URL. To achieve this, I make use of useLocation hook to retrieve the current URL: import { Link, useLocati ...

reactjsmenumaterial-uireact-router-dom

I encountered an issue when trying to initiate the React application using the "npm start" command

I'm a beginner in the world of React and this marks the debut of my first application. Having ensured that I've installed the latest versions of Node and NPM/NPX, I proceeded to create a directory using the command "create-react-app my-app". ...

node.jsreactjsreact-nativenpmcmd

Tips on retrieving JSON data from javascript files

Hey everyone, I need assistance with using Tumblr and connecting my Twitter account. Tumblr provided me with this sample file: I'm wondering if it's possible to retrieve follower count and screen name data from this file. If so, can someone guid ...

javascriptjqueryjsontwittertumblr