CODEWITHSUNDEEP
htmlcsscss-grid
user7461846
user7461846

Reputation:

4x3 grid with two items double height

I'm trying to create 4x3 grid with two items double height.

.grida {
	width:540px;
	display: grid;
	row-gap: 14px;
	grid-template-columns: repeat(4, 120px);
	justify-content:space-evenly;
	align-content: space-evenly;
	background-color: #fff;
	color: #444;
}

.card {
	background-color: #ddd;
	color: #555;
	border-radius: 5px;
	padding: 5px;
	font-size: 150%;
	height:68px;
}

.a {
	grid-row: auto / span 2;
}

.g {
	grid-row: auto / span 2;
}
<div class='grida'>
  <div class="card a">A</div>
  <div class="card b">B</div>
  <div class="card c">C</div>
  <div class="card d">D</div>
  <div class="card e">E</div>
  <div class="card f">F</div>
  <div class="card g">G</div>
  <div class="card h">H</div>
  <div class="card i">I</div>
  <div class="card j">J</div>
</div>

Why are there empty blocks?
I want a and g to be double height.
Any help?

Upvotes: 4

Views: 1078

Answers (2)

Sandeep Gupta
Sandeep Gupta

Reputation: 7250

Already answered but using grid-auto-rows:68px might be the less hacky solution. 

    .grida {
        width:540px;
        display: grid;
        row-gap: 14px;
        grid-template-columns: repeat(4, 120px);
        justify-content:space-evenly;
        align-content: space-evenly;
        background-color: #fff;
        color: #444;
        /*setting the height of automatically/implicitly created rows*/
        grid-auto-rows:68px;
    }

    .card {
        background-color: #ddd;
        color: #555;
        border-radius: 5px;
        padding: 5px;
        font-size: 150%;
        /*height:68px;*/

    }

    .a,.g {
        grid-row: auto / span 2;
    }
<div class='grida'>
    <div class="card a">A</div>
    <div class="card b">B</div>
    <div class="card c">C</div>
    <div class="card d">D</div>
    <div class="card e">E</div>
    <div class="card f">F</div>
    <div class="card g">G</div>
    <div class="card h">H</div>
    <div class="card i">I</div>
    <div class="card j">J</div>
</div>

Upvotes: 0

alimbaronia
alimbaronia

Reputation: 504

grid-row doesn't work because you are setting a height on the card divs. In order to adjust the "height" of card divs, I did a trick using padding. Do this:

.grida {
	width:540px;
	display: grid;
	row-gap: 14px;
	grid-template-columns: repeat(4, 120px);
	justify-content:space-evenly;
	align-content: space-evenly;
	background-color: #fff;
	color: #444;
}

.card {
	background-color: #ddd;
	color: #555;
	border-radius: 5px;
	font-size: 150%;
	padding: 30px 5px
}

.a, .g {
	grid-row: auto / span 2 !important;
}
<div class='grida'>
  <div class="card a">A</div>
  <div class="card b">B</div>
  <div class="card c">C</div>
  <div class="card d">D</div>
  <div class="card e">E</div>
  <div class="card f">F</div>
  <div class="card g">G</div>
  <div class="card h">H</div>
  <div class="card i">I</div>
  <div class="card j">J</div>
</div>

Upvotes: 9

Related Questions