I solve the problem of generating svg images, while it is important to arrange the elements correctly (under the image) in the overall image. It is very convenient to place images using the css grid, but unfortunately, it is impossible to use the css grid for svg sub-elements. At least, it does not work with a simple transfer of css properties.

So all the same, you can somehow use the css grid for svg, or is it just not implemented?

Example implementation of grid css: https://jsfiddle.net/Nic34/yh61nxru/

#wrapp { display: grid; grid: "w1 w2" "w1 w3"; width: 100px; height: 100px; grid-gap: 10px; background: burlywood; background: burlywood; border: 10px solid burlywood; } #wrapp div { background: bisque; } #w1 { grid-area: w1; } #w2 { grid-area: w2; } #w3 { grid-area: w3; } 
 <div id=wrapp> <div id='w1'>1</div> <div id='w2'>2</div> <div id='w3'>3</div> </div>

Example for svg: https://jsfiddle.net/Nic34/adm0ogy9/

 #wrapp { display: grid; grid: "w1 w2" "w1 w3"; width: 100px; height: 100px; grid-gap: 10px; background: burlywood; background: burlywood; border: 10px solid burlywood; } #wrapp div { background: bisque; } #w1 { grid-area: w1; } #w2 { grid-area: w2; } #w3 { grid-area: w3; } 
 <svg id=wrapp viewBox="0, 0, 100, 100"> <g id='w1'>1</g> <g id='w2'>2</g> <g id='w3'>3</g> </svg>

  • I understood you correctly that in grid css there will be raster images in each rectangle, and in each rectangle, also under the raster image there should be an svg element, for example an icon, svg button - Alexandr_TT
  • Here it is the location of elements that is important, and it doesn’t matter what kind of element it is - whether it is an image, an icon, or an svg element. The main thing is that the elements can be placed without specifying the exact coordinates (as is usually done for drawing svg). - Idushii
  • I will clarify again, should the raster image and svg element be in the same grid cell? Suppose a bitmap image occupies the entire grid cell, as a background, and the svg image should be on top of the image? or in the same cell, under the picture below? - Alexandr_TT
  • In different cells. Each element is set in a separate cell. But cells can have different sizes and it’s not easy to solve with a table, or the solution will be too loud. - Idushii
  • that is, one cell for a raster image, another cell below the image for svg? - Alexandr_TT

0