mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-17 05:29:56 +00:00
3e92ec80f3
According to https://www.w3.org/TR/css-grid-2/#placement-shorthands when setting the 'grid-row' and 'grid-column' shorthand property to a single <custom-ident> value, both 'grid-row-start'/'grid-column-start' and 'grid-row-end'/'grid-column-end' should be set to that <custom_ident>.
34 lines
No EOL
839 B
HTML
34 lines
No EOL
839 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<style>
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-rows:
|
|
[headline-start]
|
|
auto
|
|
[headline-end content-start]
|
|
auto
|
|
[content-end];
|
|
grid-template-columns:
|
|
[content-start title-start]
|
|
100px
|
|
[title-end]
|
|
repeat(3, 100px)
|
|
[content-end];
|
|
}
|
|
.headline {
|
|
grid-row: headline;
|
|
grid-column: title;
|
|
background-color: lightsalmon;
|
|
}
|
|
.content {
|
|
height: 100px;
|
|
grid-row: content;
|
|
grid-column: content;
|
|
background-color: lightblue;
|
|
}
|
|
</style>
|
|
<div class="grid-container">
|
|
<div class="headline">Headline</div>
|
|
<div class="content">Content</div>
|
|
</div> |