Delete the space between "Align-items" in CSS Grid

Question

Delete the space between "Align-items" in CSS Grid

I am experimenting with CSS Grid to create a dynamic layout for a small test blog. However, I have encountered an issue related to positioning.

Since the length of the content in the articles is unknown due to it being a blog, using fixed positioning to adjust the layout is not feasible.

Here is my current layout:

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

I would like the layout to resemble this:

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

My code structure currently looks like this:

CSS

.articles {
    margin: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
}
article {
    align-self: start;
}

HTML

<div class="articles">
    <article>lorem ipsum...</article>
    <article>lorem ipsum...</article>
    <article>lorem ipsum...</article>
</div>

The align-self property seems to be functioning correctly by removing the empty space created by the larger (Second) paragraph. However, the third paragraph remains in its original position instead of moving up to fill the now blank space where align-self: stretch should have worked.

Any suggestions on how to resolve this issue would be greatly appreciated.

html css css-grid

Answer 1

Answer №1

When it comes to laying out content like this, CSS columns might be a more suitable option compared to using CSS Grid or Flexbox:

body {
  background: #FFF;
}

.cards {
  -webkit-column-width: 300px;
  -moz-column-width: 300px;
  column-width: 300px;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  width: 90%;
  max-width: 1100px;
  margin: 30px auto;
}

.card {
  margin: 15px 0;
  padding: 15px;
  background: #EEE;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  display: inline-block;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

<div class="cards">
  <div class="card">
    <h2>Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
  </div>
  <div class="card">
    <h2>Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis.</p>
  </div>
  <div class="card">
    <h2>Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
  </div>
  <div class="card">
    <h2>Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
  </div>
</div>

Answer 2

When it comes to laying out content like this, CSS columns might be a more suitable option compared to using CSS Grid or Flexbox:

body {
  background: #FFF;
}

.cards {
  -webkit-column-width: 300px;
  -moz-column-width: 300px;
  column-width: 300px;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
  width: 90%;
  max-width: 1100px;
  margin: 30px auto;
}

.card {
  margin: 15px 0;
  padding: 15px;
  background: #EEE;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  display: inline-block;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

<div class="cards">
  <div class="card">
    <h2>Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
  </div>
  <div class="card">
    <h2>Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis.</p>
  </div>
  <div class="card">
    <h2>Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
  </div>
  <div class="card">
    <h2>Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi finibus odio in enim feugiat sagittis. Mauris ac nulla ac nulla volutpat scelerisque vel eu nisi. Curabitur vehicula vestibulum ligula eu condimentum.</p>
  </div>
</div>

Answer 3

Answer №2

Working with CSS Grid doesn't make it easy to achieve the desired result of having elements arranged strictly in columns. While flexbox might offer a solution, the true ideal setup would be a grid with two columns, each acting as an independent flexbox container.

The struggle arises due to the fact that CSS Grid inherently operates in both rows and columns, making purely column-based layouts challenging to accomplish without explicit row definitions. The addition of auto-rows or auto-columns can further complicate matters by introducing rigid spacing constraints after the first element is added.

CSS Grid's strength lies in its ability to handle 2D layouts compared to the 1D focus of flexbox and normal document flow. This means that article heights directly influence row heights within the grid, presenting obstacles for achieving distinctive column-only arrangements without predefined content heights.

To mimic such a layout effectively, one must assign fixed heights to articles to enable spanning across multiple rows of varying sizes. Despite potential workarounds suggested by others for using Columns, Flexbox emerges as a more stable and widely supported alternative, especially considering the limited browser compatibility of the former approach when paired with CSS Grid.

Answer 4

Working with CSS Grid doesn't make it easy to achieve the desired result of having elements arranged strictly in columns. While flexbox might offer a solution, the true ideal setup would be a grid with two columns, each acting as an independent flexbox container.

The struggle arises due to the fact that CSS Grid inherently operates in both rows and columns, making purely column-based layouts challenging to accomplish without explicit row definitions. The addition of auto-rows or auto-columns can further complicate matters by introducing rigid spacing constraints after the first element is added.

CSS Grid's strength lies in its ability to handle 2D layouts compared to the 1D focus of flexbox and normal document flow. This means that article heights directly influence row heights within the grid, presenting obstacles for achieving distinctive column-only arrangements without predefined content heights.

To mimic such a layout effectively, one must assign fixed heights to articles to enable spanning across multiple rows of varying sizes. Despite potential workarounds suggested by others for using Columns, Flexbox emerges as a more stable and widely supported alternative, especially considering the limited browser compatibility of the former approach when paired with CSS Grid.

Delete the space between "Align-items" in CSS Grid

Answer №1

Answer №2

Similar questions

Upgrading Pagination from Bootstrap 3 to Bootstrap 4: A Step-by-

The snap drag position resets to its original placement when dragged for a second time

Is there a way to style alternate iframes using CSS?

What could be causing the inaccuracies in my precise web design layout?

What causes Windows 7 users to consider the VS Code website unsafe?

Safari does not support JavaScript, while Firefox and Chrome do

The CSS Scroll-Snapping feature seems to be overlooking one specific element that it should be snapping to

Exploring the html element through Xpath

Is there a way to vertically center the form in order to position the logon at the top center?

Creating a Distinctive HTML Structure with Div Percentage (HTML 4)

Vertical Graph - Utilizing HTML and Cascading Style Sheets

Reaching for a particular design, yet ending up with something unexpected

Gather information from HTML elements that are updated with text dynamically via AJAX calls using Scrapy

In what way is my identified ID behaving as an array?

Struggling with displaying a CSS dropdown menu below its parent element?

Hidden submission button on form

Delayed response of text effects in JQuery on page load

Loading New Page When Iframe is Loaded

What is the best way to remove a logo from a wordpress website?

Expandable Hover Navigation Bar with jQuery for Full Page Width Dimension