A Grid of Logos in Squares

Creating Magazine Logo Grid Layout: Detailed Explanation of CSS Grid Tips

This article will guide you how to create a flexible, responsive magazine logo grid layout using CSS Grid. This layout is often used to display donors, sponsors, or product users. Using squares can effectively handle logos of different sizes, proportions and visual weights to avoid layout confusion.

1. Grid structure

Use Emmet to quickly create HTML structures:

 <code>.grid>div*5>img</code>

Press the Tab key and expand it as:

<div class="grid">
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
</div>

2. CSS Grid Basics

Adopt flexible column technology:

 .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1rem;
}

This not only creates flexible columns, but also allows the number of columns to be automatically adjusted according to the screen size.

3. Create a square

No need to force the height to set, use pseudo-elements and padding-bottom tips:

 .grid > div {
  background: black;
  padding: 1rem;
}

.grid > div::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}

This will keep the height of each grid item consistent with its width, forming a perfect square.

4. Picture overlay and center

To overlay the image with the pseudo-element, use Grid again:

 .grid > div {
  /* ... */
  display: grid;
}
.grid > div::before,
.grid > div > img {
  grid-area: 1 / 1 / 2 / 2;
}

This will make both the pseudo-element and the picture located in the first cell of the grid item, implementing overlay.

To center the image, set width: 100%; height: 100%; and use object-fit: contain;

 .grid > div > img {
  width: 100%;
  height: 100%;
  object-fit: contains;
}

5. Anomaly of drag and drop size adjustment

It should be noted that when dragging the picture, the picture may deform.

6. Use absolute positioning alternatives

If the drag exception is a problem, absolute positioning can be used:

Method 1:

 .grid > div > img {
  position: absolute;
  max-width: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

Method 2:

 .grid > div > img {
  position: absolute;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Both methods can solve the problem of drag and drop exceptions.

Video tutorial

(The video link should be inserted here, not provided in the original text)

With the above steps, you can easily create a flexible and responsive magazine logo grid layout. Choose the centering method of the picture that suits your needs to ensure the best user experience.

The above is the detailed content of A Grid of Logos in Squares. For more information, please follow other related articles on the PHP Chinese website!