CODEWITHSUNDEEP
htmlcsscss-grid
user12622894
user12622894

Reputation:

Make an element take several columns

If I understand correctly the command "grid-column: span 2" allows an element to take several columns, but I have a strange bug in the following case: enter image description here

I don't understand why my first div (i1) red doesn't appear, it should take the first line, like the yellow div (i4)

#container {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 10% 80% 10%;
}

#i1 {
  grid-column: 1/2;
  grid-row: 1/3;
  background-color: red;
  grid-column: span 2;
}

#i2 {
  background-color: blue;
  grid-column: 1/2;
  grid-row: 2/3;
}

#i3 {
  background-color: green;
  grid-column: 2/2;
  grid-row: 2/3;
}

#i4 {
  grid-column: 1/2;
  grid-row: 3/3;
  background-color: yellow;
  grid-column: span 2;
}
<div id="container">
  <div id="i1"></div>
  <div id="i2"></div>
  <div id="i3"></div>
  <div id="i4"></div>
</div>

Upvotes: 0

Views: 70

Answers (3)

Suryansh Singh
Suryansh Singh

Reputation: 1173

Yours was not working because you set grid-column: span 2; for #i1 which basically overrides your grid-column: 1/2;. And grid-column: span 2; is shorthand for :

 grid-column-start: span 2;
 grid-column-end: auto;

mixed with grid-row: 1/3; when you only need grid-row: 1/2;which caused the problem. As a matter of fact even for your #i4 there were mistakes.

Your problem should have less to do with why this happening and more to do with correcting the properties because many time some properties give unexpected result favorable or not, so better take care to follow guidelines and correct syntax and not fall in such unexpected situations.

The grid-column property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties:

  • grid-column-start
  • grid-column-end

The grid-row property specifies a grid item's size and location in a grid layout, and is a shorthand property for the following properties::

  • grid-row-start
  • grid-row-end

#container {
  height: 80vh;
  width: 80%;
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: 10% 80% 10%;
  /*gap:10px;*/
}

#i1 {
  grid-column: 1/3;
  grid-row: 1/2;
  background-color: red;

}

#i2 {
  background-color: blue;
  grid-column: 1/2;
  grid-row: 2/3;
}

#i3 {
  background-color: green;
  grid-column: 2/2;
  grid-row: 2/3;
}

#i4 {
  grid-column: 1/3;
  grid-row: 3/4;
  background-color: yellow;
}
<div id="container">
  <div id="i1"></div>
  <div id="i2"></div>
  <div id="i3"></div>
  <div id="i4"></div>
</div>

Upvotes: 0

Harshal
Harshal

Reputation: 339

in #id1 i have removed the :-
grid-column: 1/2; grid-row: 1/3;

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="../Css/style.css">

    <style>
        #container
{
    height: 100vh;
    width: 100%;
    display : grid;
    grid-template-columns: 30% 70%;
    grid-template-rows : 10% 80% 10%;
}

#i1
{
    background-color: red;
    grid-column: span 2;  

}
#i2
{
    background-color: blue;
    grid-column: 1/2;
    grid-row: 2/3;
}
#i3
{
    background-color: green;
    grid-column: 2/2;
    grid-row: 2/3;
}
#i4
{
    grid-column: 1/2;
    grid-row: 3/3;
    background-color: yellow;
    grid-column: span 2;  
}
    </style>
</head>
<body>
    <div id="container">
        <div id="i1"></div>
        <div id="i2"></div>
        <div id="i3"></div>
        <div id="i4"></div>
    </div>
</body>
</html>

Upvotes: 1

Slobodan Draksimovic
Slobodan Draksimovic

Reputation: 107

Try changing grid-column: 1/ span 2 and it will work. :)

Upvotes: 0

Related Questions