How to create a specific layout arrangement using CSS grid?

Question

I have a simple block of three elements which I am showing in my app as follows 3 items on desktop devices but on small devices eg tablets and phones I want to show this element as follows

Here is my solution in file live demo on jsfidle

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

@media (max-width: 544px) {
  .grid-container {
    /* I tried this but the 3rd element not taking the full width */
    grid-template-columns: 1fr 2fr;
  }
}

<h1>Grid Elements</h1>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">
    3
    <h1>Grid Elements</h1>
    <p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
  </div>
</div>

How can I achieve this?

s.kuznetsov · Accepted Answer · 2021-03-25 17:54:20Z

Add a grid-column: span 2 rule for the third element, defining it through :nth-child(3). This will stretch this element by two columns. Like this:

.grid-item:nth-child(3) {
    grid-column: span 2;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
    background-color: #2196f3;
    padding: 10px;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

@media (max-width: 544px) {
    .grid-container {
        grid-template-columns: 1fr 2fr;
    }
    .grid-item:nth-child(3) {
        grid-column: span 2;
    }
}

<h1>Grid Elements</h1>

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">
        3
        <h1>Grid Elements</h1>
        <p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
    </div>
</div>

Dhara · Accepted Answer · 2021-03-25 17:51:25Z

A good article to learn about this CSS property https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout

For Tablet and mobile device, we need to set media query as below

        .grid-container {
          display: grid;
          grid-template-columns: 1fr 1fr 3fr;
          background-color: #2196F3;
          padding: 10px;
        }
        .grid-item {
          background-color: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(0, 0, 0, 0.8);
          padding: 20px;
          font-size: 30px;
          text-align: center;
        }
        @media (max-width: 544px){
            .grid-container {
                grid-template-columns: 1fr 2fr;
            }
            .item {
                  grid-column-end: span 2;
    grid-row-end: span 2;
            }
        }
@media only screen and (max-width: 768px){
 .item {
                  grid-column-end: span 2;
    grid-row-end: span 2;
            }
}

<h1>Grid Elements</h1>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item item">3
  
  <h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

  
  </div>  

</div>

Collectives™ on Stack Overflow

How to create a specific layout arrangement using CSS grid?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related