Css display grid

.parent{
  display: grid;
  grid-template-columns: repeat(3, 250px);
  /*
    instead of writing 250px 250px 250px 3 times, we use repeat(number of columns, width) function
  */
  grid-template-rows: repeat(3, 400px);
}
.parent .child-1{
  grid-column: 2 / 4; /* Start at column 2 and end at column 3, 4 not counted [not inlcuded]*/
  grid-row: span 2; /* take only 2 rows. can be written also as [grid-row: 1 / 3]*/
}
.parent .child-2{
  grid-column: span 3;
  grid-row: 1 / 3; /* 2 rows */
}
/*
  ShortHand
  grid-column: grid-column-start grid-column-end
  grid-row: grid-row-start grid-row-end
  Example: 
    *grid-column: 2 / 8; start at 2 and end at 8-1 = 7
    => grid-column-start = 2, grid-column-end = 7
*/

Source: grepper.com

CSS Grid Display

/*style.css*/
.container {
  display: grid;
}

Source: wecancodeit.instructure.com

What is display grid css

grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);

Source: learncssgrid.com

Similar codes

1 vote354 views1 answer
Add image to div in css
CSS
0 vote363 views1 answer
Css start animation on hover
CSS
0 vote327 views1 answer
Skip main content - keyboard accessible buttons on navbar - css
CSS
0 vote380 views1 answer
Html css how to arrange images of different sizes
CSS
47 votes317 views9 answers
Cannot be loaded because running scripts is disabled on this system
CSS
1 vote355 views1 answer
To make the content of the select2 RTL or LTR
CSS
48 votes350 views6 answers
Background color using css
CSS
2 votes406 views2 answers
Restrict a paragraph height css
CSS
72 votes357 views6 answers
Css font size
CSS
1 vote342 views1 answer
How to make a relative div not take up space
CSS