mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-29 04:39:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb/Layout: Implement align-content for grid layout

Browse source
This commit is contained in:
Neil Viloria 2024-10-06 18:32:54 -06:00 • committed by Alexander Kalenik
commit b9e7c6a2f6
Notes: github-actions[bot] 2024-10-08 19:31:01 +00:00
5 changed files with 466 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

98
Tests/LibWeb/Layout/input/grid/align-content.html Normal file
View file

@ -0,0 +1,98 @@
<!doctype html>
<style>
body {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-columns: repeat(3, 30px);
grid-template-rows: repeat(3, 30px);
gap:15px;
height: 300px;
border: 2px solid #333;
}
.item {
background-color: rebeccapurple;
}
</style>
<div class="container" style="align-content: start;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="align-content: end;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="align-content: center;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="align-content: stretch;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="align-content: space-between;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="align-content: space-around;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container" style="align-content: space-evenly;">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>