title: Centering an image in CSS grid
body: <p>I am trying to fix my grid layout.</p>
  
  <p>Firstly, the image should be at the center of <code>.container</code>. I tried using <code>align-self: center;</code>, but that did not work. </p>
  
  <p>The headers and paragraph are really messed up. Before this, the paragraph was pushing down the image so I thought if I gave both of them (and the headers) custom <code>grid-row</code> value, they'd be fixed, but instead, I have all of these elements overlap each other. I need them to be ordered correctly. The paragraph under H3 and H3 below H1.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 100%;
  }
  
  .container img {
    grid-column: 1 / 2;
    grid-row: 1;
  }
  
  .container h1,
  h3 {
    grid-column: 3;
    grid-row: 1;
    line-height: 0.35;
  }
  
  .container p {
    grid-column: 3;
    grid-row: 1;
    width: 350px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;h1&gt;-[IFwsI]- Jail&lt;/h1&gt;
    &lt;h3&gt;More than 40 000 registered players&lt;/h3&gt;
    &lt;p&gt;The most active, and one of the most successful servers. Jail has a set of rules players need to follow and enjoy the roleplay of inmates vs. CTs scenario&lt;/p&gt;
  
    &lt;img src="https://i.imgur.com/epqMIJv.jpg" height="418" width="740" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>