I want to organize the divs in groups of 5 by 10

Question

I want to organize the divs in groups of 5 by 10

I need help arranging a 5x10 grid within a larger box with equal spacing between all the boxes. However, depending on the size of the smaller divs, there could be six in a row. The same applies for justify-content and align-content after specifying in pixels. When I try to create space using padding or margin, the spaces end up overlapping between the boxes (6px if given as 3px). How can I solve this issue?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment - 1</title>
    <link rel="stylesheet" href="./assignment1.css">
</head>
<body>
    <div class="box">
        ...

This is my current result: https://i.sstatic.net/zJxl4.png

The desired result is shown below: https://i.sstatic.net/Nw6Np.png

html css flexbox display

Answer 1

Answer №1

It appears that utilizing grid, gap, and aspect-ratio would be optimal:

.implementation {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  background: skyblue;
  padding: 10px;
}

.implementation > * {
  background: aliceblue;
  aspect-ratio: 1;
}

<div class="implementation">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

It appears that utilizing grid, gap, and aspect-ratio would be optimal:

.implementation {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  background: skyblue;
  padding: 10px;
}

.implementation > * {
  background: aliceblue;
  aspect-ratio: 1;
}

<div class="implementation">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

I want to organize the divs in groups of 5 by 10

Answer №1

Similar questions

Challenges regarding the CSS styling of the ui bootstrap modal and its compatibility with

Responsive grid made with HTML and CSS to create dynamic DIVs

Using React Typescript to create a button component with an attached image

The data insertion query in MYSQL seems to be malfunctioning

Difficulty displaying background image on iOS devices like iPhone and iPad

Receiving form input through an express route and attempting to insert it into a MySQL database results in empty entries

Having RoundRect take the top left position of its rectangle container rather than its immediate parent (td)

Navigating the screen reader with the cursor位

Prevent scale animation for a specific section of the icon using CSS

Is it possible to have a fluid width for an icon set using the :after pseudo-element

Struggling to remove the translucent effect when hovering over the share button

Tips for customizing icons when hovering in CSS

Ensure that the jQuery ajax function triggers only after the images or iframes have completely loaded

Experiencing difficulties with setting the width of owl carousel

Want to know how to get images to show up when sharing a link on Twitter?

store the id of each li element dynamically into an array

Exploring the POST method functionality in AJAX

Stripping out only the position attribute using jQuery

Setting up a Bootstrap tokenfield for usage with a textarea

How can you determine the CSS style value based on a different value?