grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
According to that rule, the computer must replicate a paragraph as many times as necessary to fit in the available room. It must have a minimum width of 450px per column. For instance, if the room is just 1200px, you may get two columns of 450px, but there would be a significant space at the 300px side. The 1fr is useful in this situation because it instructs the browser to split the available space evenly between those columns and fill the remaining space.
This is related to the previous point, and without this concept, you would only get as many rows across the screen as your camera would allow, and on my big apple, you would only get about six sections. We must set a max-width similar to the minimum width for each paragraph plus the gaps we are using in order to keep to three columns.
The calc ( ) ( calculation ) makes it possible to automate this, and instead of figuring out what 3 x 450px + 2 gaps of.5rem equal ( which would be manually impossible if there were also percentages involved ), We instruct the computer to use the calc function to calculate it, which it does. The maximum width is 3 by the column-width changing plus 2 times the distance variable, according to the statement. If we decide to change column widths or gaps at a later time, we are not required to do so by using variables.
Don’t publish anyone else into it because the:root is just a record root, as previously mentioned. It’s the same as saying,” For your purposes,”
html{}But, 99 % of the time, you will use it because it is considered best practice.
The adjustable is accessible to all nested in that context when it is applied to :root or html. You can create a local context for that variable in the same way you would for classes, and you only have the ability to specify what you were addressing, for instance, if you were addressing unordered lists ( UL).
ul( --column-width: 300px;)
Therefore, that changing would only be accessible inside a listing element and its children, not to mention a div in any other context.
When I restates the media query’s :root, only the media query’s true value will apply.
e.g.
@media screen and (max-width: 500px) { :root { --column-width: 300px; --gap: 0.5rem; }}This specifies that the value of the parameter for :root will now be 300px when the camera length is less than 500px. Although the original resolution was 450px, that’s too big as we get smaller, but by lowering the variable, columns at screens below 500px are automatically generated. I used an random 500px because it appeared that your design needed to be reduced about that time. I don’t care about windows or devices because they will all function because of the method I employ.
Because we’ve used the media keyword before, I’m not sure why you’re confused because you simply want to change the values when the camera is smaller than a certain size. As I’ve mentioned before a few times that when you override a law in any subsequent css, the worth in the media query is overridden and worthless. If you do this, the value in the media query is overridden and ineffective.
Read the following to understand the ins and outs of style factors, which are actually called practice properties.