Learn CSS Grid in 20 Minutes
Why Stack Overflow recommends it
Stack Overflow users link it when answering layout questions and want to point askers to a quick, practical introduction to CSS Grid.
Recommended by 4 people across 4 different months, 2021 to 2022.
What it is
A short screencast tutorial by Web Dev Simplified that walks through CSS Grid: what it is, how it differs from flexbox, and the main container and item properties. It uses live examples on CodePen to cover the terminology and show how to build responsive layouts with little code.
What people said
Recommends Anshuman Yadav · 2021-10 · Stack Overflow · on “How can I design UI in IONIC as shown in the image sample?”
You could use CSS Grid properties to achieve such UI, it really makes our life easier. Learn. try and experiment the things. You'll be easily able to attain such UI. I have attached some useful references below: [LINK] [this video] [LINK] [LINK]
Recommends Kiran M P · 2022-01 · Stack Overflow · on “How to align div and make responsiveness after reaching certain resolutions using media queries?”
Try learning flexbox and CSS grid. I made a simple demonstration with flexbox in codepen, not an exact answer. demo Codepen link [LINK] Tutorials: Flexbox [LINK] CSS Grid [this video]
Recommends Zach Jensz · 2022-03 · Stack Overflow · on “How to organise text in boxes?”
You are looking for CSS Grid! Adapt the example below to your needs. Kevin Powell resource on CSS grid [LINK] webdevsimplified resource on CSS Grid [this video] Complete guide to CSS grid by csstricks [LINK] body { display: grid; min-height: 100vh; grid-template-columns: 60% 40%; grid-template-rows: repeat(8, 1fr); margin: 0; } p { height: 100%; margin: 0; outline: 1px solid black; } .date-and-time { grid-row: span 3; } .stages { grid-row: span 4; } .setlist { grid-row: span 3; } .shop { grid-row: span 2; } .booking { grid-row: span 2; grid-column: span 2; } <body> <p class="date-and-time">Located at Sydney Showground. Date: 19-24 July 2022</p> <p class="stages">With a total of 10 unique areas, t
Recommends Christos Binos · 2022-04 · Stack Overflow · on “HTML/CSS Flex column & Flex row with same width size”
Whenever you work along the x and y axis, I'd recommend you use CSS Grid [LINK] This way, you can position the buttons explicitly using grid-row: [selected lines] or grid-column: [selected lines] . This method would allow you to adjust the precise size of the grid in each position, easily controlling the width. You would require a 3x3 grid that can be easily achieved through creating a wrapper div and applying the following CSS: display: grid grid-template-column: repeat(3, 1fr); grid-template-row: repeat(3, 1fr) Then select your buttons in CSS and position them using grid-row: and/or grid-column: . If you are new to CSS grid and position, watch this video [this video] by Web Dev Simplified Anoth