Gap, template areas, and auto-placement

The declaration gap: 30px 15px puts 30px of space between the rows of a grid and 15px between its columns, and no space at all around the outer edges. Spacing is the first of three topics here. The other two are how the browser chooses a cell for an item you have not placed, and how you can place items by drawing the layout as text.

gap, row-gap and column-gap

Here is the gallery again, now with six photos and with the third photo twice as wide as the others:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">