Breaking News: Grepper is joining You.com. Read the official announcement!

grid-column-row

emre answered on April 16, 2022 Popularity 9/10 Helpfulness 4/10

answer grid-column-row

related css row column grid

grid-column-row

Comment

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box ;
}

body{
    display: grid;
    grid-template-columns: repeat(12fr, 1fr) ;
    grid-template-rows: 1fr 6fr 1fr;
    height: 100vh;
    
}
header, article, nav, div, footer{
    display: flex;
    justify-content: center;
    align-items: center;
}
header{
    /* width: 100%; */
    grid-column: span 12;
    background-color: yellow;
}
article{
    grid-column: span 3;
    background-color: red;
    grid-row-start: 2;
    grid-row-end: 4;
}
nav{
    grid-column: span 7;
    background-color: aqua;
}
div{
    grid-column: span 2;
    background-color: chartreuse;
}
footer{
    /* grid-column: span 10; */
    grid-column-start: 4;
    grid-column-end: 13;
    background-color: lightcoral;
}

Popularity 9/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Nov 04 2023

emre

0 Answers Avg Quality 2/10

Closely Related Answers

css row column grid

Comment

Here is an example from https://www.w3schools.com/css/tryit.asp?filename=trycss_grid 

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</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>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Apr 16 2022

CompSciGeek

0 Answers Avg Quality 2/10

grid-column-row

Contents

More Related Answers

grid-column-row

Closely Related Answers

css row column grid

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.