title: What is difference between justify-self, justify-items and justify-content in CSS grid?
body: <p>I'm really confused. When looking for online resources and documentation, most of the documentation of these properties seem to reference Flex-box, not grid. And I don't know how applicable the documentation for the equivalent properties in Flex-box is to grid.</p>
  
  <p>So, I've tried referencing <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="noreferrer">https://css-tricks.com/snippets/css/complete-guide-grid/</a>, which defines them as follows:</p>
  
  <p><strong>justify-items</strong> - Aligns the content inside a grid item along the row axis</p>
  
  <p><strong>justify-content</strong> - This property aligns the grid along the row axis</p>
  
  <p><strong>justify-self</strong> - Aligns the content inside a grid item along the row axis</p>
  
  <p>But I still don't understand what the difference between them is. So, I have 3 questions I want to clarify.</p>
  
  <ol>
  <li>Is the <code>justify-items</code> property in Flex-box the same as the
  <code>justify-items</code> property in Grid? or are they different somehow?
  (In other words, can I reuse Flex-box documentation for Grid)</li>
  <li>What do (justify-)content, self and items do?</li>
  <li>How are (justify-)content, self and items different?</li>
  </ol>
  
  <p>Any clarification would be greatly appreciated.</p>
  
  <p><strong>Edit:</strong> Since everyone keeps giving me Flex-box resources, I am asking about css-grid, NOT flex-box.</p>