You can also take more control of which plots are put side by side, by using concat, hconcat or vconcat. This pragma can contain a list of objects with mark and encoding pairs:

{
  "data": ...,
  "hconcat": [
    {
      "mark": ...,
      "encoding: ...
    },
    {
      "mark": ...,
      "encoding: ...
    },
    {
      "mark": ...,
      "encoding: ...
    }
  ]
}

For example:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Side-by-side plots",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega/master/docs/data/cars.json"
  },
  "transform": [
    { "calculate": "year(datum.Year)", "as": "yearonly" }

  ],
  "concat": [
    {
      "mark": "circle",
      "encoding": {
        "x": {"field": "Acceleration", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
        "color": {"field": "yearonly", "type": "ordinal"}
      }
    },
    {
      "mark": "circle",
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
        "color": {"field": "yearonly", "type": "ordinal"}
      }
    }
  ]
}

Do not forget to put each mark - encoding pair within curly brackets! The above specification should give you the following image:

Exercise - Recreate the plot below (i.e. including the fact that it has 2 columns and 2 rows!). Tip: check the documentation for concat.