codemarch Profile picture
Jan 26, 2023 11 tweets 3 min read Read on X
A quick glance at "CSS Grid Container "

Thread🧵
🔶 CSS Grid Container

To make an HTML element behave as a grid container, you have to set the `display`property to `grid` or  `inline-grid`
🔹 The grid-template-columns Property

The `grid-template-columns` property defines the number of columns in your grid layout, and it can define the width of each column.
Example👇
🔹The grid-template-rows Property

The `grid-template-rows` property defines the height of each row.
Example👇
🔹 The justify-content Property

The `justify-content` property is used to align the whole grid inside the container.
Example👇
🔹The align-content Property

The `align-content` property is used to *vertically* align the whole grid inside the container.
Example👇
if you enjoyed this thread, please like, comment, and retweet the opening tweet.
🔹Follow @codemarch
🔹You can also check our HTML & CSS Visual Treat!😍for more!!!
codemarch.gumroad.com/l/hxazr

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with codemarch

codemarch Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @codemarch

Jul 30, 2024
𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗔𝗿𝗿𝗮𝘆𝘀(𝗣𝗮𝗿𝘁-𝟮) Image
𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗻𝗴 𝗔𝗿𝗿𝗮𝘆 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝘀.
The index number is used to access an array element:

𝙽͟𝚘͟𝚝͟𝚎͟:͟ ͟𝙰͟𝚛͟𝚛͟𝚊͟𝚢͟ ͟𝚒͟𝚗͟𝚍͟𝚎͟𝚡͟𝚎͟𝚜͟ ͟𝚜͟𝚝͟𝚊͟𝚛͟𝚝͟ ͟𝚠͟𝚒͟𝚝͟𝚑͟ ͟𝟶͟.͟

[0] is the first element.
[1] is the second element.
[2] is the third element. Image
𝗖𝗵𝗮𝗻𝗴𝗶𝗻𝗴 𝗮𝗻 𝗔𝗿𝗿𝗮𝘆 𝗘𝗹𝗲𝗺𝗲𝗻𝘁.
we can change the value of the elements in an array.
𝗘𝘅𝗮𝗺𝗽𝗹𝗲: Image
Read 12 tweets
Jul 10, 2024
CSS Colors

Visually explained: Image
Image
Image
Read 17 tweets
Jul 8, 2024
Free HTML/CSS Templates: Image
Image
Image
Read 9 tweets
Jul 7, 2024
Learn HTML & CSS in 50 Days:
Days 1-5: HTML Basics

➔ Introduction to HTML
• What is HTML?
• HTML Syntax
• Elements and Tags

➔ Basic HTML Structure
• Head, Body, Title
• Paragraphs, Headings

➔ Project:
• Simple Personal Bio Page
Days 6-10: HTML Intermediate

➔ Links and Images
• Internal, External, Anchor Links
• Adding Images, Alt Text

➔ Lists and Tables
• Ordered, Unordered, Nested Lists
• Basic Table Structure

➔ Project:
• Simple Blog Page
Read 13 tweets
Jan 31, 2024
Learn React in 30 Days.

Complete Structure:
Pre-Requisite:

Javascript Before React - Content Added. Image
Week 1: Introduction and Basics Image
Read 9 tweets
Jan 4, 2024
Components in React.

Explained: Image
Real-Life Example:

Imagine building a house 🏠.

Each room (kitchen, bedroom, bathroom) represents a component.

React components contain particular UI and behaviour, just as rooms have particular purposes and looks.

Let's explore these "rooms" in the world of React!
🔹 Functional Components:

• Simpler and more concise.
• Stateless (initially).
• Use functions to return JSX.
• With Hooks, they've become even more powerful!

Example: Image
Read 12 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(