Task 43 : CSS 3 Training for WordPress – Part 10 CSS Grid – WP Spartans 300

by | Jun 8, 2021 | 0 comments

Task 43 : CSS 3 Training for WordPress – Part 10 CSS Grid – WP Spartans 300

by | Jun 8, 2021 | CSS Tips and Tricks | 0 comments



CSS is Visual Representation of the web content. CSS3 training for WordPress is part of our Three Months Absolutely Free WordPress training (In Urdu/ Hindi) under WP Spartans Mission 300. This is Part 10 and Task 43.

In this Task 43 of CSS Training for WordPress, our main topic was CSS Grid. However, we also tried to answer the following questions:

1) How to add Media Queries to our CSS?
2) When do we use Browser Compatibility (-webkit-, -moz-, -o-, -ms- etc). Browser Fallback for CSS3 properties and values if there is some compatibility issue)
3) How to create and use Variables in CSS?

We also talked about Happy New year 2019 Assets. Before this task, I sent an email to all subscribers spartans. Here is the link to access:
https://mailchi.mp/848668bb8d74/300-spartans-wordpress-developers-mission-2019-happy-new-year-assets

display: grid;

grid-template-rows
grid-template-columns : 200px 200px 200px;
or 320px 200px 20%;
or 200px auto 200px;

grid-template-rows: 100px; (if one value, first row will be 100 px;

grid-column-gap: 20px; (gutter)
grid-row-gap: 20px; (gutter)

grid-gap : 20px; (for both columns and rows)

grid-gap : 15px 20px; (if two values first deals with row)

200px 1fr 200px;

fr occupies free space available

1fr 1fr 200px;

1fr 1fr 1fr; boom we don’t need 33.33%

grid-template-column: 2 fr repeat (3, 1fr);

grid-template-column: minmax(200px, 300px) 1fr 1fr;

(then we don’t need media queries)

grid-template-columns: repeat (3, minmax (200px, 1fr);

grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-template-columns: repeat (auto-fill, 200px);

grid-template-columns: repeat (auto-fill, minmax(60px, 1fr);
auto-fit removes empty space

grid-template-columns: repeat (auto-fit, minmax(250px, 1fr);
auto-fit removes empty space, and we dont need to use media queries

explicit grid vs implicit grid

grid-auto-rows: 250px;
grid-auto-rows : minmax (150px, auto);

grid-auto-flow: column; (default auto flow is row)

grid-auto-columns: 100px; or 1fr;

grid inspector tool – firefox

header

grid-column-start:1 ;
grid-column-end:3 ;

footer

grid-column-start:1 ;
grid-column-end:3 ;

grid-column: 1 / -1;

(first is row second is column)

grid-area ……… shorthand property
grid-template-area

گرڈ ایریا میں نام رکھیں۔ گرڈ ٹیمپلٹ میں ٹٹیمپلٹ بنائیں

“header header”
“main aside”
“footer footer”;

“. footer”
full stop means empt space

#WPSpartans300 is a mission. WordPress Developers from all over the world have started taking interest in this initiative. Therefore, I’m putting all my energy to make this journey wonderful and full of success.

Link to Access Top WP Developers Mission 2019:
http://bit.ly/2Pgia38

Or, simply visit https://www.freelancepakistan.com and click on 300 Spartan Page.

Through this three months Free WordPress Training (Absolutely FREE), we will learn how to create responsive WordPress Themes and Plugins. We’ll be in a position to sell our assets via Themeforest (Envato) and other platforms. Get ready to conquer that front.

Let me tell you that without passion and commitment, you won’t be able to be a Rockstar WordPress Developer. It does take a lot of hard work ; however, the end result is awesome.

I will guide you step by step so that you could get results from your WordPress Training Mission. Get ready to excel as a professional developer. It’d be fun and exciting adventure.

300 Spartans will learn to unlock WP Codex. APIs will be the ultimate goal. From PSD to WordPress Conversion to WordPress Based Mobile Apps, Spartans will conquer their fears. 300 Lucky WordPress Developers will enjoy lucrative benefits of successful online projects.

My name is Farooq, and I’m a top rated Upwork Freelancer. I’m offering services to international clients as ‘WordPress and Graphic Design Pro’.

source

0 Comments

Submit a Comment

What Our Clients Are Saying

Travco RV

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really...

Rod, Travco-Rv.com

Dieno Digital Marketing Services
5
2018-04-27T20:16:51+00:00

Rod, Travco-Rv.com

Leland lets me focus on running my business while he takes care of the digital marketing for us. He really takes care of our companies marketing with his expertise and has a lot of great ideas. We are very fortunate to  have him helping us with fresh new ideas.

British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all...

Tara, British Columbia Coalition Of Motorcyclists

Dieno Digital Marketing Services
5
2018-04-27T22:05:28+00:00

Tara, British Columbia Coalition Of Motorcyclists

We've been working with Dieno Digital, for the past year and a half now and couldn't be happier with all the updates  to our website. Leland is always very responsive and able to answer all of questions or fix any issues in no time at all. We look forward to continuing to expanding and broadening our website with Dieno Digital.

Amplifylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to...

Rob - Amplylife.ca

Dieno Digital Marketing Services
5
2018-05-03T19:49:40+00:00

Rob - Amplylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to bring a high level of creativity, energy, expertise and professionalism to the project for their digital marketing needs. We are so excited for the chance to work more with Leland and Dieno Digital.

FS Designs

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic...

F.S.

Dieno Digital Marketing Services
5
2018-06-19T18:50:18+00:00

F.S.

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic design business and improved my SEO so that I appear more frequently and near the top of searches. He a great digital and web strategist and I would highly recommend his services.
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>