Only one CSS Grid column is saved when HTML is saved as PDF

Question

Whenever an inline HTML string generated by my python script is saved as a PDF using weasyprint, only one grid column is saved in the PDF document, even if when the HTML is viewed in browser; multiple columns are shown, the CSS is set to auto-fit and to have a minimum width of 250px, and a maximum set to 1fr, so that they would expand and equally share any extra space when it is available, even when the size of the PDF is changed this still happens (there is definitely extra space available). It seems no matter what all grid items are stacked directly on top of each other when in a pdf and not when viewed in browser.

The CSS

.table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.box {
  background-color: White;
  padding: 10px;
  color: Black;
  text-align: center;
  border: 1px solid Black;
}

body {
  padding: 2em;
}

@page {
  size: A4
}

The Python

HTML(string=win.webview.html).write_pdf("out.pdf",stylesheets=[CSS(filename=css)])