mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 13:12:46 +00:00
cfcc459140
Before this change, parsed grid-template-columns/grid-template-rows were represented as two lists: line names and track sizes. The problem with this approach is that it erases the relationship between tracks and their names, which results in unnecessarily complicated code that restores this data (incorrectly if repeat() is involved) during layout. This change solves that by representing line definitions as a list of sizes and names in the order they were defined. Visual progression https://genius.com/
14 lines
No EOL
355 B
HTML
14 lines
No EOL
355 B
HTML
<!DOCTYPE html><html><style type="text/css">
|
|
.container {
|
|
display: grid;
|
|
grid-template-columns: [grid-start] repeat(12, 40px) [grid-end];
|
|
background: pink;
|
|
}
|
|
.item {
|
|
grid-column: grid-start / grid-end;
|
|
}
|
|
.box {
|
|
width: 100%;
|
|
outline: 5px solid black;
|
|
}
|
|
</style><div class="container"><div class="item"><div class="box">1</div></div> |