表格 HTML、CSS 中的网格

Question

I need help, I have a document that I need to generate in HTML CSS then that will be transformed into PDF.

I have a table to do by putting information like below (the color is not important):

Can we put the grid directly in a tag, maybe like that?

// example
<td class="grid">
  <p>
   ...text
  </p>
</tp>

I have tried different ways but I can't get the results I wanted.

Answer 1

This will apply 2 columns on one row

add .grid-container to the td ,

and col1 and col2 to each P under the container

 .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 0px 0px; grid-template-areas: "col1 col2"; }.col1 { grid-area: col1; }.col2 { grid-area: col2; }

 <div class="grid-container"> <div class="col1"></div> <div class="col2"></div> </div>