Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Intro to HTML & CSS) expand_more
HTML Basics
Document structure Head metadata Headings and paragraphs Links Images and alt text Lists Tables Forms and labels
Semantic HTML
header main footer nav landmark article and section figure and figcaption button versus link details and summary time element address element
CSS Basics
CSS selectors Class selectors Cascade and specificity Box model Margin and padding Typography Colors Borders
Layout & Responsive
display block and inline Flexbox basics Grid basics Positioning Media queries Responsive images CSS custom properties Focus styles
Intro to HTML & CSS / Layout & Responsive

Grid basics

Learn Grid basics in Intro to HTML & CSS with a focused explanation, a topic-specific example, and a mastery check.

12 min read • Intermediate
intro-html-css-027.html
html 
<style>.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}</style><div class="grid"><article>A</article><article>B</article><article>C</article></div>
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Grid basics Mastery Check →
← PREVIOUS
Flexbox basics
NEXT →
Positioning