6

Not sure if what am I am trying to achieve is possible using css grid but the current implementation I have is not working. Below is the layout I am trying to achieve. The box in red spans two rows.

enter image description here

#wrapper { display: grid; grid-template-columns: repeat(5, 90px); grid-auto-rows: 50px; grid-gap: 5px; width: 516px; } .wide { grid-row: 1 / 4; grid-column: 3 / 5; background-color: red; } .block { background-color: grey; }
<div id="wrapper"> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block wide"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div>

Improve this question
1
  • 4
    the red box does not span 2 rows. it spans 2 columns!. Simply apply grid-column: span 2; to the box Commented Sep 24, 2021 at 15:25

4 Answers 4

Reset to default
13

As said in the comment, you dont span 2 rows, you span 2 columns. Also you need to apply the class to the 1st element: .wide { grid-column: span 2; }

In your picture you also have a 6 column grid not a 5 column one

.grid { display: grid; grid-template-columns: repeat(6, 90px); grid-auto-rows: 50px; grid-gap: 5px; } .wide { grid-column: span 2; } /* for styling purpose only */ .grid > div:nth-child(n+1) { background-color: grey; } .grid > div:nth-child(1) { background-color: brown; }
<div class="grid"> <div class="wide"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I'd faced a similar dilemma, but to have two columns instead, then to have some items to span two rows. At first I was using numerical positions to hard-set these, but I've completely overlooked your use of "span". So I've decided to try "grid-row: span 2", and it had worked perfectly! Thank you!
2 

#wrapper { display: grid; grid-template-columns: repeat(5, 90px); grid-auto-rows: 50px; grid-gap: 5px; width: 516px; } .wide { grid-row: 1 / 2; grid-column: 1 /3; background-color: re } .block { background-color: blue; }
<div id="wrapper"> <div class="block wide"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div>

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
2

Following Html and Css you need for grid span option:

<div class="grid"> <div class="col-span"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

And the Css you need for that is:

.grid { display: grid; grid-template-columns: repeat(4, 50px); grid-auto-rows: 50px; grid-gap: 5px; } .col-span { grid-column: span 2; } .grid > div { background-color: #fcfcfc; } .grid .col-span { background-color: gray; } 

.grid { display: grid; grid-template-columns: repeat(4, 50px); grid-auto-rows: 50px; grid-gap: 5px; } .col-span { grid-column: span 2; } .grid > div { background-color: #e9e0e0; } .grid .col-span { background-color: gray; }
<div class="grid"> <div class="col-span"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

Improve this answer

Comments

1

The following produces exactly what you want.

<div id="wrapper"> <div class="block" style="grid-column: 1/3;"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div>

In the CSS, I deleted .wide and .block. #wrapper was left unchanged.

Not sure if what am I am trying to achieve is possible using css grid

Anything is possible using CSS Grid 😁

Improve this answer

1 Comment

@user you are welcome!! If you are looking to learn modern CSS, I absolutely love moderncss.dev, great material there! Such as: 3 CSS Grid Techniques to Make You a Grid Convert

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.