JSFiddle - React, Tailwind, and code Playground

by Hui Zheng

HTML

<html
  <head>
    <title>Making a grid using CSS
    </title>
  </head>
  <body>
    <h1>Some of the food in my refrigerator</h1>
    <ul>
      <li>apple</li>
      <li>bananas</li>
      <li>blueberry</li>
        <li>chocolate cake</li>
      <li>cranberry</li>
      <li>dates</li>
      <li>eggplant</li>
      <li>figs</li>
      <li>grapefruit</li>
    </ul>
  </body>
</html>

CSS

body {
    font-family: verdana, sans-serif;
    font-size: 12px;
    margin-left: 2cm;
    }
li {
    border: 1px solid silver;
    float: left;
    list-style: none;
    margin: 1px;
    padding: 2px 5px 2px 5px;
    width: 2.5cm;
    }
ul {
    padding-left: 0;
        width: 10cm;
    }