Welcome to this new tutorial on the channel today I'm going to teach you
something very interesting that is a new functionality present in css I am talking to you
about the css grids, this new css functionality allows us to locate the elements in a sort of
grid, and it's pretty controllable in my opinion this represents the end, you could say
of the html tables, these elements that you see here are divs, and I am using
the css grids I'm placing them in a sort of table, let's see quickly here in "caniuse"
the browsers, the compatibility that has with browsers, you can see it has compatibility
with almost all, there are two with which it hasn't any kind of compatibility that is the "UC
Browser for android "I think this refers to the webview and opera mini
all the rest are compatible, and Internet explorer let's read why it's in yellow,
has partial support with prefixes and below it says, partial support of internet explorer
it means that it supports an old version of the specification, but "Edge" remember
that internet explorer is practically dead the one that matters is "Edge" and "Edge" does
supports it, then fine, it's going to work in most browsers, then
well let's start the tutorial, but before before, sorry excuse me before I want to tell you
something really quick I'm planning to make giveaways inside the channel for example I want to make an
Arduino giveaway or a Dreamweaver's there are many interesting things
that I would like to, in the description below I leave you a video where I detail
all those plans, I need to collect the money for those giveaways so
I opened a patreon page, for now as you can see I don't have any patreon,
but I hope that changes, so then the link to my patreon page I'll leave it
in the description if you want to visit it, first see the video where I detail the plans so
you see what I propose with this, Now we're going to start the tutorial,
this is the source code that we are going to write It looks long but it is very simple really, very
very simple, I'm going to erase it to begin with, the html I didn't delete it because it's something too
simple, we have a "div" with "contenedor" (means container) class What's it gonna be? well the container, like
his name says, and 6 divs that have two classes, each has its own number here
We have 1, 2, 3 and 4 and later we are going to see why, and they all have the "celda" (means cell) class, it's very simple,
let's start with container, we're going to give a "display:grid", this is the new display
which gives us the "Gridlayout" specification that's the full name, "GridLayout" by
the wat before I forget, go to the description below because remember that I always
leave complementary links so you can read more on the subject, so check the description,
now we are going to use this property that it's called "grid-template-columns" and after
let's use this below "grid-template-rows" I want to do, as you saw the table
I haven't updated it, I think it's still available, yes it is, I want it to be
made of two columns, at the beginning, forget about these below, let's do these
6 divs, where we are going to have, two columns by 3 rows, then, they are two columns
Which Is it going to be the width of each column? the first column we are going to give it a width of 35 pixels,
and the second column we're going to give it a width of 65 pixels, it is very customizable, now with
the next one, just like the other ones we give them a width, 35 pixels, 25 pixels and the one below
75 pixels, for now we are ready here, there are properties of the "Gridlayout" on
the container and properties exclusively for each cell, for that we have,
one, two, three, four, five and six, now Well, this thing that I'm going to do is not part
of the "Gridlayout" specification but I recommend it so we have a way
to define attributes common to all cells, then in the "cell" class that's what
we are going to do I want all of them to have a red background, now if we go
with each cell individually, we go for example with "one" we have the style or property
"grid-column" and then we will also have "grid-row" here we will define in which column
is going to be placed I want to place it in 1, here let's define in "grid-row" in which row
will be placed, in 1, and so we will go thus defining successively then, first
column, first row, this, second column first row, this, and so on,
first column second row, this one, let's do it with the next one and the rest
I will do it in fast camera, because I think It should be clear by now, this is the first column,
no sorry, the second column, because it is this one from here... I want them to be next to each other
but the in the first row, I will do the other 4 in fast camera
and here it is, first column second row, second column second row, first column
third row, second column third row, let's see how we are going, so here we
have it it's already like a grid, now, like I was telling you there are properties
for the container and properties for each cell, then "grid-gap" is going to be the separation
horizontal and vertical of each cell first we define the horizontal and then the vertical,
then, 20 pixels by 30 pixels, 20 pixels is going to be horizontal and 30 pixels is going to be
the vertical separation, and there we see that the vertical is wider, I'll leave it in 10 by 10, I like it better
that way so there it is, let's create another div, to show you another of the things that
It can be done, there it is, I want that cell 7 to expand, how can we do it?
Well, then, it's going to be in the column 1, but, I want it to expand towards
another column then we do so, here place to which column you are going to expand,
and I want this in the fourth row, we're going up here because right now we have 4 rows,
so let's add that width, what happens if you don't add it? I'm going to show you later on
and here we have 7 now, this is a bit annoying, right? What if we have
100 rows Should we do it for each one of them? not necessarily, the first thing that
what we're going to see about this is the "repeat" function, I'll show you again
How many do we have here? 1,2,3,4 which refers to the 4 rows, well, we do
a "repeat" and we put 4, "repeat" in English means to repeat, then, "repeat" 4 times
What will be repeated 4 times? Whatever we want, for example 45 pixels, that's going to make them
all have 45 pixels wide and the same up here, "repeat" let's put 2,
because it is repeated twice and 65 pixels, and there it is, something else, What if I add
cells without specifying the size? here in "grid-template-rows" or in "grid-template-columns",
Well very simple, let's see it, let's add 2, well there I added it now let's give it
here an 8, "grid-column" this is going to be in the 1 ... I passed it in fast camera, here
I forgot the 9 ... I passed it in fast camera, I did not include it here, here
there are only 4 columns and right now there will be ... sorry there are only four rows, and right now
There will be 5, what will happen? well, it doesn't happen anything, he automatically adds them to the grid
with the minimum size possible, but I show this to you because there is a way,
to add or let's say, set the automatic size of those that are added automatically,
in this case we are only adding rows, then "grid-auto-rows" then I simply
put the size, well... they are going to have 80 pixels only for those that are added
out of this rule here, they will have 80 pixels, and there it is, there are many other things
about the "gridlayout" in css I tried cover the most important, the minimum necessary
so you could make a grid, now, I clarify some things that are a bit obvious, for example
if you want to expand into towards the rows, it's same, only instead of "grid-column"
is "grid-row" its basically the same, in this way, "span 2", it's the same. In the description below
I leave you complementary links so you can learn more for example you can align the
elements vertically and horizontally that's very interesting, visit my blog to
download the source code written here in the tutorial, and remember as I said at the beginning
stop by the video that I leave you in the description where I talk about that project that I have
with this patreon page I'd like to see what you think, As I told you before, there are going to be giveaways and many other things
but I need funding for that... If the tutorial was useful
Give me a thumbs up, I want to know your opinion regarding the "Css grids" Do you think
this is the end of the table tag in html? As well in the comments you can leave me any
doubt you have, click here to subscribe and remember to click on the little bell,
so you don't miss any other video,My name is Giovanni and thanks for watching
For more infomation >> Russia Collusion Probe Is FBI 'Corruption' at Its Worst – Tom Fitton HUGE NEWS! - Duration: 5:08. 
For more infomation >> LIT killah - Apaga el Celular (Film by EmeCreative) - Duration: 3:53. 
For more infomation >> How to treat ear infection | Natural Health - Duration: 6:07. 
Không có nhận xét nào:
Đăng nhận xét