12. CSS Grid – brown-salmon-372873.hostingersite.com

CSS Grid

CSS Grid Components A grid always consists of: A Grid Container – The parent (container) element, where the display property is set to grid or inline-grid One or more Grid Items – The direct children of the grid container automatically becomes grid items Example

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: dodgerblue;
  padding: 10px;
}
.container div {
  background-color: #f1f1f1;
  border: 1px solid black;
  padding: 10px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>


<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.container {

display: grid;

grid-template-columns: auto auto auto;

background-color: dodgerblue;

padding: 10px;

}

.container div {

background-color: #f1f1f1;

border: 1px solid black;

padding: 10px;

font-size: 30px;

text-align: center;

}

</style>

</head>

<body>

<h1>Grid Layout</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

</div>

</body>

</html>

Result CSS Grid Container A grid container contains one or more grid items arranged in columns and […]

Category: 12. CSS Grid

CSS Grid