Is there a way to merge two sets of pictures into one?

I am trying to display a grid of lines with a set of cells that fill the squares in said lines.

I have already tried concatenating them like simple lists.

This is the grid of lines. It is displayed correctly on its own.

grid = translate (fromIntegral width * (-0.5)) 
                 (fromIntegral height * (-0.5)) 
                 (pictures (concat [
                                    [line [(i * unitWidth, 0.0)
                                          ,(i * unitWidth, fromIntegral height)]
                                    ,line [(0.0, i * unitHeight)
                                          ,(fromIntegral width, i * unitHeight)]
                                    ]
                                   | i <- [1..gridDimension]]
                            )
                 )

This is the set of units that are drawn between the lines, also displayed correctly on its own.

units = pictures [translate ((x*unitWidth - unitWidth/2) + (fromIntegral width*(-0.5))) 
                            ((y*unitHeight - unitHeight/2) + (fromIntegral height*(-0.5)))
                            unit
                 | x <- [1..gridDimension], y <- [1..gridDimension]]

My main method:

main = display window backgroundColor units

I can exchange units for grid in this place and it works fine. I also tried this:

main = display window backgroundColor (units++grid)

It threw the following error:

40: error:
    • Couldn't match expected type ‘[a0]’ with actual type ‘Picture’
    • In the first argument of ‘(++)’, namely ‘grid’
      In the third argument of ‘display’, namely ‘(grid ++ units)’
      In the expression: display window backgroundColor (grid ++ units)
   |
10 | main = display window backgroundColor (grid++units)
   |                                        ^^^^

/home/georg/Desktop/THM/6_semester/funktionale_programmierung/my/app/Main.hs:10:40: error:
    • Couldn't match expected type ‘Picture’ with actual type ‘[a0]’
    • In the third argument of ‘display’, namely ‘(grid ++ units)’
      In the expression: display window backgroundColor (grid ++ units)
      In an equation for ‘main’:
          main = display window backgroundColor (grid ++ units)
   |
10 | main = display window backgroundColor (grid++units)
   |                                        ^^^^^^^^^^^

/home/georg/Desktop/THM/6_semester/funktionale_programmierung/my/app/Main.hs:10:46: error:
    • Couldn't match expected type ‘[a0]’ with actual type ‘Picture’
    • In the second argument of ‘(++)’, namely ‘units’
      In the third argument of ‘display’, namely ‘(grid ++ units)’
      In the expression: display window backgroundColor (grid ++ units)
   |
10 | main = display window backgroundColor (grid++units)
   |                                              ^^^^^

Solution

The (++) :: [a] -> [a] -> [a] function appends two lists, a Picture is not a list, so you can not use that function.

You can however use the (<>) :: Semigroup m => m -> m -> m here, since a Picture is an instance of a Semigroup:

we thus can write it like:

main = display window backgroundColor (units <> grid)

or you can use pictures :: [Picture] -> Picture again, and include your units and grid, like:

main = display window backgroundColor (pictures [units, grid])