Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
545 views

Basic Example: Div Div Div Div Div Div Div Div Div Div Div Div Div Div

CSS Grid layout allows dividing a page into major regions and defining relationships between HTML elements in terms of size, position, and layer. It enables aligning elements into columns and rows, and supports more complex layouts than tables. A grid container's child elements can position themselves to overlap similar to positioned elements. The example shows a three column grid with rows from 100-auto pixels. Elements are placed using line-based positioning.

Uploaded by

S
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
545 views

Basic Example: Div Div Div Div Div Div Div Div Div Div Div Div Div Div

CSS Grid layout allows dividing a page into major regions and defining relationships between HTML elements in terms of size, position, and layer. It enables aligning elements into columns and rows, and supports more complex layouts than tables. A grid container's child elements can position themselves to overlap similar to positioned elements. The example shows a three column grid with rows from 100-auto pixels. Elements are placed using line-based positioning.

Uploaded by

S
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Grid layout excels at dividing a page into major regions, or defining the relationship in terms

of size, position, and layer, between parts of a control built from HTML primitives.

Like tables, grid layout enables an author to align elements into columns and rows. However,
many more layouts are either possible or easier with CSS grid than they were with tables. For
example, a grid container's child elements could position themselves so they actually overlap and
layer, similar to CSS positioned elements.

Basic example
The below example shows a three column track grid with new rows created at a minimum of 100
pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.

HTML

<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>

CSS

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}

You might also like