CSS GRID Master: Practical Web Implementation of Figma Design

CSS Grid is a powerful tool that allows you to implement complex layouts simply and intuitively. This lecture is designed to help you easily learn the core concepts of CSS Grid to practical applications step by step. Stop being tied to complicated floats and flexboxes and learn the standard of efficient layout design! Start now!

(5.0) 2 reviews

18 learners

Level Basic

Course period Unlimited

HTML/CSS
HTML/CSS
jQuery
jQuery
Figma
Figma
HTML/CSS
HTML/CSS
jQuery
jQuery
Figma
Figma
날개 달린 동전

Recommend Course to grow and earn commission!

날개 달린 동전

Marketing Partners

Recommend Course to grow and earn commission!

What you will gain after the course

  • A Complete Guide to Basic CSS Grid Syntax and Properties

  • Project practice with real-world examples

  • Design reference webpage implementation know-how

When to use CSS GRID?

How would you style a design like the one below?

You'll probably use float or flex to place elements. If the elements are aligned horizontally and vertically to fit a 12-column grid, such as in the design, it would be efficient to place them using float or flex.

How about a design like this?


The above design is not easy to arrange using float or flex. It is also difficult to process all elements as absolute. If you do so, it will be difficult to maintain later, and if you implement it responsively, it will become a site that is even more difficult to maintain.

When implementing a design like the example above, you must use CSS GRID to set up a grid as shown below and place elements on the set grid.


Key Learning Contents

Learn the various properties of CSS Grid.

  1. Grid Basic

  2. Fraction


  3. Positioning - Using line numbers

  4. Positioning - Using grid cell names


  5. auto-fit, min-max functions


    Learn how to place as many elements as possible within the width of a container.

  6. Automatic row placement
    Rows that do not specify a separate height can have their row height set automatically if there is not enough space.

  7. Place by grid line name


  8. New properties available only in Grid
    A property similar to flex's align-items can be used not only on the cross axis but also on the main axis.

  9. FLEX properties available in Grid
    You can also use various flex properties on elements that have display:grid applied.

  10. Automatically place rows - auto-fit, auto-fill
    Learn how to place as many columns as possible and deal with the remaining space.



  11. Implementing a website - article layout
    Let's implement a simple web page using the learned grid properties.



  12. Using Grid and Flex
    Learn how to style web pages using CSS grid and flex.


Learn how to implement a design reference website.

Identifying the design and creating elements

Make sure your design is organized in groups and layers in a coding-friendly way, and that your styles and variables are reflected in your design. Save the images you need according to the situation.

Writing HTML by Section

Create a large section of HTML by referencing the group name, and write appropriate HTML tags that match the content's characteristics by referring to the detailed design. At this time, write in compliance with search engine optimization, web standards, etc.

Set up the entire GRID layout

Add guides to align elements to make it easier to see the width of rows and columns.

Writing CSS by section

Write CSS by section, separated by comments.

Implementing a slideshow using the library

Move the slides using buttons or implement automatic slides using the jQuery library.

Using the Slide Library

We provide a PDF summary of the key points.

Provides descriptions and practice example files for all properties of flex.


Provides a starting example.

The 01_grid folder provides example files for the core grid properties. You can learn them by watching the lecture.


Provides a completed example.

We provide the source code for the completed version. Compare it with the example you completed in class.


I recommend the following lectures:

Javascript Basics

Learn the basics of pure JavaScript with practical examples.

jQuery Basic

Learn jQuery basics, practical examples, and how to use major libraries.

Recommended for
these people

Who is this course right for?

  • For those who have a basic understanding of HTML and CSS but struggle with layout design

  • For those who find it difficult to implement design drafts into code

  • For those who want to build a well-organized UI using CSS Grid

  • For those who want to transition from the existing float and flexbox methods to efficient layout management

  • For those who want to create their own clean and modern website

  • Those who want to gain practical experience through projects

Need to know before starting?

  • Basic HTML

  • CSS Basics

Hello
This is ezweb

2,711

Learners

58

Reviews

4

Answers

4.9

Rating

11

Courses

■ [Current] ESTSOFT KDT Frontend Instructor
■ Green Computer Art Academy Web Publishing and Frontend Instructor
■ Operator of Web Publishing YouTube Channel 'Rock's Easyweb'
■ The Joeun Computer Academy Web Publishing Instructor
■ Hanbit Computer Academy Web Publishing Instructor
■ Frontend Publisher, Professional Frontend Publishing Instructor
■ UI/UX Web Design Portfolio Instructor


[ Books ]
Published on 2021.07.19 / The Complete Figma Guide for Web Design & Web Publishing / BJ Public

Published on 2022.08.25 / Coding for the First Time with Web Publishing / Youngjin Publishing

Published 2023.10 /2024 SD Edu Yu-seonbae Web Design Technician Practical Exam Tutoring Notes / Sidae Gosi Planning

2024.11 Reprint /2025 SD Edu Yoo-Sunbae Web Design Technician Practical Exam Tutoring Notes / Sidae Gosi Planning

2025.11 Reprint /2026 SD Edu Yoo-Sunbae Web Design Technician Practical Exam Tutoring Notes / Sidae Gosi Planning

 

[ Awards ]
2022.08 Green Computer Art Academy Jongno Branch - Outstanding Instructor 2021.06 Green Computer Art Academy Jongno Branch - Outstanding Instructor 2018.06 Green Computer Academy Sinchon Branch - Outstanding Instructor 2017.05 Green Computer Academy Sinchon Branch - Outstanding Instructor 2016.05 Green Computer Academy Sinchon Branch - Outstanding Instructor 2015.10 Green Computer Academy Sinchon Branch - Outstanding Instructor

 

 

 

More

Reviews

All

2 reviews

5.0

2 reviews

  • mrnobody님의 프로필 이미지
    mrnobody

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

    Thank you for the great lecture.

    • jinimini님의 프로필 이미지
      jinimini

      Reviews 5

      Average Rating 4.8

      5

      33% enrolled

      ezweb's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!

      $22.00