How can I horizontally add divs until the width size is exceeded?

Question

How can I horizontally add divs until the width size is exceeded?

I am looking to make tiles flow horizontally until there is no more space, then wrap to the next line. Additionally, I want them to be responsive to different screen sizes. Here is my initial code snippet:

.tile {
  width: 248px;
  height: 126px;
  background-color: #e4e4e4;
  margin: 17px;
}

.title {
  display: block;
  float: left;
  padding-left: 13px;
  font-size: 20px;
  padding-top: 8px;
}

<div class="tile">
  <label class="title">Tile1</label>
</div>
<div class="tile">
  <label class="title">Tile2</label>
</div>
<div class="tile">
  <label class="title">Tile3</label>
</div>
<div class="tile">
  <label class="title">Tile4</label>
</div>
<div class="tile">
  <label class="title">Tile5</label>
</div>
<div class="tile">
  <label class="title">Tile6</label>
</div>
<div class="tile">
  <label class="title">Tile7</label>
</div>
<div class="tile">
  <label class="title">Tile8</label>
</div>
<div class="tile">
  <label class="title">Tile9</label>
</div>

I want Tiles 1, 2, and 3 in the first row, then 4, 5, and 6 in the second row, and so on, all in a responsive manner (This is just an example - the number of tiles in each row should adjust automatically based on page width).

How can I achieve this layout without using JavaScript?

html css

Answer 1

Answer №1

Styling with CSS

.flex{
  display:flex;
  justify-content: space-around;
  align-items:center;
  flex-flow: row wrap;
}

Creating HTML Layout

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Responsive Tiles Layout</title>
</head>
<body>
  <div class="flex">
    <div class="tile">
      <label class="title">Tile1</label>
    </div>
    <div class="tile">
      <label class="title">Tile2</label>
    </div>
    <div class="tile">
      <label class="title">Tile3</label>
    </div>
    <!-- Additional tiles go here -->
  </div>
</body>
</html>

To create a responsive layout, use the provided CSS code and add extra

"<div class="flex"></div>"

elements as needed to accommodate increased width. Keep in mind that adjusting the width will automatically adjust the responsiveness of the layout.

Answer 2

Styling with CSS

.flex{
  display:flex;
  justify-content: space-around;
  align-items:center;
  flex-flow: row wrap;
}

Creating HTML Layout

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Responsive Tiles Layout</title>
</head>
<body>
  <div class="flex">
    <div class="tile">
      <label class="title">Tile1</label>
    </div>
    <div class="tile">
      <label class="title">Tile2</label>
    </div>
    <div class="tile">
      <label class="title">Tile3</label>
    </div>
    <!-- Additional tiles go here -->
  </div>
</body>
</html>

To create a responsive layout, use the provided CSS code and add extra

"<div class="flex"></div>"

elements as needed to accommodate increased width. Keep in mind that adjusting the width will automatically adjust the responsiveness of the layout.

Answer 3

Answer №2

To make it happen, use the flex-wrap property in CSS, which adjusts even when you change the size of the browser window (responsive). Here's a demonstration:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: green;
}

.flex-container > div {
  background-color: #e4e4e4;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div>Tile 1</div>
  <div>Tile 2</div>
  <div>Tile 3</div>  
  <div>Tile 4</div>
  <div>Tile 5</div>
  <div>Tile 6</div>  
  <div>Tile 7</div>
  <div>Tile 8</div>
  <div>Tile 9</div>  
  <div>Tile 10</div>
  <div>Tile 11</div>
  <div>Tile 12</div>  
</div>

<p>Adjust the browser window to see the effect.</p>

</body>
</html>

Answer 4

To make it happen, use the flex-wrap property in CSS, which adjusts even when you change the size of the browser window (responsive). Here's a demonstration:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: green;
}

.flex-container > div {
  background-color: #e4e4e4;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div>Tile 1</div>
  <div>Tile 2</div>
  <div>Tile 3</div>  
  <div>Tile 4</div>
  <div>Tile 5</div>
  <div>Tile 6</div>  
  <div>Tile 7</div>
  <div>Tile 8</div>
  <div>Tile 9</div>  
  <div>Tile 10</div>
  <div>Tile 11</div>
  <div>Tile 12</div>  
</div>

<p>Adjust the browser window to see the effect.</p>

</body>
</html>

How can I horizontally add divs until the width size is exceeded?

Answer №1

Answer №2

Similar questions

Can you explain the distinction between align-content and align-items?

javascript An interactive accordion component created with Bootstrap

Sort by the date using a specific data attribute

The rangeslider thumb is positioned incorrectly on the track in the Firefox browser. How can this issue be resolved? Please see the code provided

Using XPath in Selenium to locate elements that are siblings and have multiple children

Why my attempts to alter numerous CSS elements using JQuery are failing?

What is the best way to ensure a div takes up the rest of the height on a page when the header's size is unpredictable

CSS: Caption text below image remains on same line

Display text with ellipsis on one of the two spans within a container

Tips for triggering both server side and client side events in ASP web forms

How can I show the configuration in Laravel?

Navigate through the components of an array within HTML

When a user scrolls over an element with a data-attribute,

Tips for positioning two spans next to each other at full width using CSS

Triggering unexpected syntax error upon clicking the dropdown menu in the navigation bar

Is it recommended to place the styles created by material-ui for child components after the styles generated for the parent component?

What is the best way to programmatically click on each list item without triggering their normal behavior and silently loading their content instead?

What is the best way to create a footer in this scenario and is there a method to perfectly center an

css failing to load properly following javascript redirection

Switch image upon hover within a sprite