With the code below, what should be happening is each item should take up an equal amount of 3 per row. It should look like in a social website where each picture is the same width and height, and all columns equal. What's happening in this video is what I'm trying to accomplish:
https://www.youtube.com/watch?v=7MPELEU_bFQ&list=PL6gx4Cwl9DGD3PLy3DZHr6-LpCY7irPU8&index=4
NOTE: I am following the second part of the video, where the person talks about the block grid.
The images are not showing in block grid format. Instead , what's happening is the images are showing as a regular unordered list, with bullets, one on top of the other. It's not working like in the tutorial video.
Here is the code I used. All styles and JS files are set up properly. I'm using Foundation 6.8.0, the most recent one.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Sandbox</title>
<link rel="stylesheet" href="../css/foundation.css">
<link rel="stylesheet" href="../css/app.css">
<link rel="stylesheet" href="../css/icons/foundation-icons.css">
<link rel="stylesheet" href="../css/tutorial_styles.css">
</head>
<body>
<h2>Block Grid</h2>
<div class="grid-container">
<div class="grid-x">
<ul class="medium-block-grid-3">
<li><img src="https://get.foundation/sites/docs/assets/img/thumbnail/03.jpg"></li>
<li><img src="https://get.foundation/sites/docs/assets/img/thumbnail/03.jpg"></li>
<li><img src="https://get.foundation/sites/docs/assets/img/thumbnail/03.jpg"></li>
<li><img src="https://get.foundation/sites/docs/assets/img/thumbnail/03.jpg"></li>
<li><img src="https://get.foundation/sites/docs/assets/img/thumbnail/03.jpg"></li>
<li><img src="https://get.foundation/sites/docs/assets/img/thumbnail/03.jpg"></li>
<li><img src="https://get.foundation/sites/docs/assets/img/thumbnail/03.jpg"></li>
<li><img src="https://get.foundation/sites/docs/assets/img/thumbnail/03.jpg"></li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>