CSS3 Grid

It is a new & powerful layout mode in CSS3, introducing with the concept of rows and columns, designing in 2-dimensional way

• It contains grid container[Parent] and grid items[child]
• grid container is declared either by display:grid or display:inline-grid
• grid items are declared inside grid container
• It can handle both columns and rows
• New Unit has been introduce fr [fraction]

• turned_in_notGrid related properties
  • labelParent Properties
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
    • grid-template
    • column-gap
    • row-gap
    • gap
    • grid-auto-columns
    • grid-auto-rows
    • grid-auto-flow
    • grid

  • labelChild Properties
    • grid-column-start
    • grid-column-end
    • grid-column
    • grid-row-start
    • grid-row-end
    • grid-row
    • grid-area

• turned_in_notGrid Extra properties
  • labelParent Properties
    • justify-items
    • align-items
    • place-items
    • justify-content
    • align-content
    • place-content

  • labelChild Properties
    • justify-self
    • align-self
    • place-self

Example :

library_books<div className="grid-container">
  <div className="menu">Menu</div>
  <div>Item-1</div>
  <div>Item-2</div>
  <div>Item-3</div>
  <div>Item-4</div>
  <div>Item-5</div>
  <div>Item-6</div>
</div>

library_books.grid-container {
  grid-template:repeat(3, 60px)/repeat(3, 1fr);
  gap: 5px;
  padding: 5px;
}
.grid-container div {
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: white;
}
.menu {
  grid-column: 1 / 4;
}