Advanced HTML&CSS: Grid

[codingbootcampseu]

• [ ] Use a two column layout using the grid for each article of the main content beginning with the medium breakpoint (768px)

Hints

Use a shard class selector for each article of your main content.

Create a grid with display: grid.

.main-article {
  display: grid;
}

The columns of a grid can be defined with the grid-template-columns property.

Use the fr unit to define the grid columns.

Because every child element of the grid container will be layouted inside the grid it may be necessary to add a generic wrapper element around the content of an article.

<article class="article-grid">
  <h2>...</h2>
  <div class="content-wrapper">
    <section>...</section>
    <section>...</section>
  </div>
</article>

Example Solution and Comparison

• Example solution for this task
• Comparison to previous task

[SzabiSch]

Grid verursacht immer neue Überraschungen, aber man lernt durch stolpern :)