Kozea / WeasyPrint

The awesome document factory
https://weasyprint.org
BSD 3-Clause "New" or "Revised" License
7.23k stars 686 forks source link

CSS `gap` adds too much space at the end #2167

Closed Zerotask closed 5 months ago

Zerotask commented 5 months ago

Example: https://play.tailwindcss.com/OM1dOhPIMq

<div class="grid grid-cols-2 gap-4 bg-slate-200">
  <div class="bg-yellow-200">left</div>
  <div class="bg-gray-400">right</div>
  <div class="bg-yellow-200">left</div>
  <div class="bg-gray-400">right</div>
  <div class="bg-yellow-200">left</div>
  <div class="bg-gray-400">right</div>
  <div class="bg-yellow-200">left</div>
  <div class="bg-gray-400">right</div>
  <div class="bg-yellow-200">left</div>
  <div class="bg-gray-400">right</div>
  <div class="bg-yellow-200">left</div>
  <div class="bg-gray-400">right</div>
  <div class="bg-yellow-200">left</div>
  <div class="bg-gray-400">right</div>
</div>
.gap-4 {     
    gap: 1rem/* 16px */; 
}
.grid {     
    display: grid; 
}
.grid-cols-2 {     
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
}

If I try that with weasyprint (with different colors) I get this result: image

I seems to add this. the more divs you have, the greater is the space at the bottom

liZe commented 5 months ago

Hi!

Thanks for the report. Good news: I think that it’s already been fixed in the grid-auto-flow-column branch that will be merged soon.

Zerotask commented 5 months ago

I can confirm that it's fixed with the latest commit. Thank you.