CODEWITHSUNDEEP
htmlcss
Parham
Parham

Reputation: 224

how do I change specific grid columns?

The six boxes have a grid-template-columns of 2fr 4fr. What I am trying to do is only make "box3" and "box4" 4fr 2fr (reversed). In other words, I only want "box3" to be bigger than "box4". I hope that made sense.

This is the original: enter image description here

This is how I want box3 and box4 to look like:enter image description here

.box{
        background-color: green;
        box-shadow: 2px 2px 2px;
    }
    
    .container{
        display: grid;
        grid-template-columns: 2fr 4fr;
        grid-template-rows: 200px 200px 200px;
        grid-gap: 0.5rem;
        justify-content: center;
        text-align: center;
    }
<!DOCTYPE html>
    <html lang="en">
    <head>
      <link rel="stylesheet" type="text/css" href="test.css" media="all">
    </head>
    <body>
      <div class="container">
        <div class="box1 box">box 1</div>
        <div class="box2 box">box 2</div>
        <div class="box3 box">box 3</div>
        <div class="box4 box">box 4</div>
        <div class="box5 box">box 5</div>
        <div class="box6 box">box 6</div>
      </div>
      </body>
      </html>

Upvotes: 1

Views: 70

Answers (2)

huan feng
huan feng

Reputation: 8623

.box {
  background-color: green;
  box-shadow: 2px 2px 2px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px 200px;
  grid-gap: 0.5rem;
  justify-content: center;
  text-align: center;
}

.box2,
.box6 {
  grid-column: 2 / span 2;
}

.box3 {
  grid-column: 1 / span 2;
}
<div class="container">
  <div class="box1 box big">box 1</div>
  <div class="box2 box small">box 2</div>
  <div class="box3 box">box 3</div>
  <div class="box4 box">box 4</div>
  <div class="box5 box">box 5</div>
  <div class="box6 box">box 6</div>
</div>

I'm sure there are lots of ways to achieve it. You could simply do it by using grid-column: 2 / span 2

If you want to use grid layout, you should check this tutorial out:

https://css-tricks.com/snippets/css/complete-guide-grid/

Upvotes: 2

sol
sol

Reputation: 22919

.box {
  background-color: green;
  box-shadow: 2px 2px 2px;
}

.container {
  display: grid;
  grid-template-columns: 2fr 4fr;
  grid-template-rows: 200px 200px 200px;
  grid-gap: 0.5rem;
  justify-content: center;
  text-align: center;
}

.box4 {
 grid-column: 1;
 grid-row: 2;
}
<div class="container">
  <div class="box1 box">box 1</div>
  <div class="box2 box">box 2</div>
  <div class="box3 box">box 3</div>
  <div class="box4 box">box 4</div>
  <div class="box5 box">box 5</div>
  <div class="box5 box">box 6</div>
</div>

Upvotes: 0

Related Questions