|
所在平台: Udemy |
课程主页: https://www.udemy.com/course/introduction-to-css-grid/
课程评论：没有评论
课程名称：CSS Grid 入门 课程概述：CSS Grid 是现代网页开发中最强大的布局系统之一。本课程将为您完整介绍其工作原理。您将学习如何使用一系列 CSS Grid 属性，以行、列和命名区域构建结构化、响应式的布局。每个属性都会单独演示，让您在自己的项目中有效使用 Grid 时更加清晰和自信。 课程内容将涵盖以下主题： - 网格容器属性： - grid-template-columns 和 grid-template-rows：定义显式轨道大小 - grid-auto-rows 和 grid-auto-columns：控制隐式轨道 - grid-auto-flow：管理项目的放置方向 - 间隙设置：包括 row-gap、column-gap 和简写的 gap - 网格模板区域：直观定义布局区域 - 简写属性：如 grid-template、grid 和 place-content - 对齐工具：如 justify-items、align-items 和 place-items - 内容定位：通过 justify-content、align-content 和 place-content 进行控制 - 网格项目属性： - 使用 grid-column、grid-row、grid-area 和 order 进行放置 - 使用 justify-self、align-self 和 place-self 进行单独对齐 - 控制网格内项目的大小和位置 本课程还将解释属性如 grid-template-columns 和 grid-template-rows 涉及的基础数学知识，以便您准确理解轨道大小和空间分配的工作原理。为巩固您的知识，您将通过 CSS Grid 构建一个响应式布局，将所学应用于实践中的真实场景。 无论您是刚开始学习还是重新审视 Grid 概念，本课程都为现代布局设计提供了全面且易于理解的基础。
CSS Grid is one of the most powerful layout systems in modern web development - and in this course, you'll get a complete introduction to how it works.You'll learn how to use the full range of CSS Grid properties to build structured, responsive layouts using rows, columns, and named areas. Each property is demonstrated individually, giving you the clarity and confidence to use Grid effectively in your own projects.You'll explore:Grid container properties:grid-template-columns and grid-template-rows - define explicit track sizesgrid-auto-rows and grid-auto-columns - control implicit tracksgrid-auto-flow - manage item placement directionGaps - including row-gap, column-gap, and the shorthand gapGrid template areas - define layout zones visuallyShorthand properties like grid-template, grid, and place-contentAlignment tools like justify-items, align-items, and place-itemsContent positioning with justify-content, align-content, and place-contentGrid item properties:Placement using grid-column, grid-row, grid-area, and orderIndividual alignment with justify-self, align-self, and place-selfControl over item size and positioning within the gridThis course also explains the underlying math involved in properties like grid-template-columns and grid-template-rows, so you can accurately understand how track sizing and space distribution work.To consolidate your knowledge, you'll build a responsive layout using CSS Grid, applying what you've learned in a practical, real-world scenario.Whether you're just getting started or revisiting Grid concepts, this course provides a thorough and accessible foundation in modern layout design.
