How to Arrange Multiple Divs in a CSS Grid Layout without Using Floats

Question

How to Arrange Multiple Divs in a CSS Grid Layout without Using Floats

I've been working on structuring a webpage with multiple divs containing images in a grid layout, but not using CSS Grid. Here's an example of what I'm trying to achieve:

<div class="some classes"> Some Text </div> <br>

<a href="somwhere"&gr;
  <div class="some classes float-left"> 
     <img src="http://someimage" height="200px" alt="An image"/> <br> 
     <div class="some other classes"> some image text </div>
  </div>
</a>
... (repeated div links)

<footer> some footer </footer>

Using CSS

.float-left {
  float:left;
}

The CSS classes are just placeholders without any specific meaning. The challenge lies in creating a layout where an unknown number of divs are generated automatically based on variable parameters. I initially used float:left, but when I added a footer it caused alignment issues. This could be due to the use of float property. I'm looking for an alternative approach that is responsive and does not rely on JavaScript. Any suggestions?

html css alignment

Answer 1

Answer №1

As mentioned earlier, you have the option to utilize either auto-fit or auto-fill along with minmax to establish a responsive grid layout that adjusts based on the number of items present.

To implement this, simply add the following CSS rule to the containing element (which could also be the body):

grid-template-columns: repeat(auto-fill, minmax(minimum width value, maximum width value));

If you want the footer to consistently appear below all images and span the full width, you can use:
footer { grid-column: 1 / -1; }

This methodology will arrange as many images or elements in a row as possible based on the screen size. I've included a resize property in the snippet so you can resize the element and observe how the grid adapts:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

footer {
  grid-column: 1 / -1;
}


/* for demonstration purpose only */
.grid {
  resize: horizontal;
  overflow-x: auto;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 104px;
  max-width: 100%; 
}

.grid > * {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20vh;
  color: white;
}

.grid > div:nth-of-type(3n+1) {
  background-color: red;
}

.grid > div:nth-of-type(3n+2) {
  background-color: darkblue;
}

.grid > div:nth-of-type(3n+3) {
  background-color: darkgreen;
}

.grid > footer {
  background-color: orange;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>

  <footer>Footer</footer>
</div>

Answer 2

As mentioned earlier, you have the option to utilize either auto-fit or auto-fill along with minmax to establish a responsive grid layout that adjusts based on the number of items present.

To implement this, simply add the following CSS rule to the containing element (which could also be the body):

grid-template-columns: repeat(auto-fill, minmax(minimum width value, maximum width value));

If you want the footer to consistently appear below all images and span the full width, you can use:
footer { grid-column: 1 / -1; }

This methodology will arrange as many images or elements in a row as possible based on the screen size. I've included a resize property in the snippet so you can resize the element and observe how the grid adapts:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

footer {
  grid-column: 1 / -1;
}


/* for demonstration purpose only */
.grid {
  resize: horizontal;
  overflow-x: auto;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 104px;
  max-width: 100%; 
}

.grid > * {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20vh;
  color: white;
}

.grid > div:nth-of-type(3n+1) {
  background-color: red;
}

.grid > div:nth-of-type(3n+2) {
  background-color: darkblue;
}

.grid > div:nth-of-type(3n+3) {
  background-color: darkgreen;
}

.grid > footer {
  background-color: orange;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>

  <footer>Footer</footer>
</div>

Answer 3

Answer №2

When using CSS, make sure to

.float-left {
    float: left;
}

rather than

.float-left:{
    float: left;
}

It is important to eliminate the unnecessary :.

Answer 4

When using CSS, make sure to

.float-left {
    float: left;
}

rather than

.float-left:{
    float: left;
}

It is important to eliminate the unnecessary :.

Answer 5

Answer №3

If I were to tackle this task, I would start by including the following CSS within your wrapper div:

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a b"
    "c d";
  align-items: start;
}

Next, for each individual grid 'div', you can implement the respective CSS styling like so:

.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

Answer 6

If I were to tackle this task, I would start by including the following CSS within your wrapper div:

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a b"
    "c d";
  align-items: start;
}

Next, for each individual grid 'div', you can implement the respective CSS styling like so:

.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

Answer 7

Answer №4

To easily organize your elements, place them all within a div and utilize the align attribute: your_elements This method is optimal and straightforward for those who prefer not to employ floats.

Answer 8

To easily organize your elements, place them all within a div and utilize the align attribute: your_elements This method is optimal and straightforward for those who prefer not to employ floats.

How to Arrange Multiple Divs in a CSS Grid Layout without Using Floats

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

I am trying to center align this image, but for some reason, it's not cooperating

Ensure the content of a textarea input is consistently centered vertically

What is the mechanism through which a flexbox enlarges to accommodate its overflowing child elements?

Creating a grid pattern of boxes within a rectangle using CSS

Ways to specifically select an element based on its type and class

Tooltip Bootstrap timing

What is the method for adjusting the font size of the label in an Angular mat-checkbox element?

Struggling to make a variable pass in an Ajax post script

Can you provide me with a variable that will give me the total size of the scrollbar?

Strategies for implementing a minimum height for grid-template-column containers

Floating label positioned above the field in Bootstrap 5

Insert item at the end of the box and move all elements upwards

How can you make a Dropdown Box with Javascript?

What is the reason behind CSS Animation creating gradients?

Tips for positioning a div under a floated div

Real-time update of quiz results based on varying factors

The smooth scroll feature is not functioning properly on the animated mouse-scroll down button

What is the best way to add an image element as a child of a list item only when its sibling checkbox is checked, upon clicking another button?

Placing a picture within a box that is 100% of the viewport height