[HTML5] #html5

Responsive Web Design Principles

The max-width property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width.

The height property of auto keeps the original aspect ratio of the image.

Grid

Container properties

grid-template-columns

grid-template-columns: auto 50px 10% 2fr 1fr;

This snippet creates 5 columns.

The 1 column is as wide as its content, the 2 column is 50px, the 3 column is 10% of its container, and for the last 2 columns;

3fr - The remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth

grid-column-gap

grid-row-gap

grid-column-gap: 20px;
grid-row-gap: 5px;

grid-gap

Grid-gap is a shorthand property for grid-row-gap and grid-column-gap from the previous two challenges that's more convenient to use.

If grid-gap has one value, it will create a gap between all rows and columns.

However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.

justify-items

align-items

Align items horizontally and vertically respectively;

justify-items: stretch; // (start, center, end)
align-items: stretch; // (start, center, end)

grid-template-areas

You can group cells of your grid together into an area and give the area a custom name. Do this by using grid-template-areas on the container like this:

grid-template-areas:
  "header header header"
  "advert content content"
  "footer footer footer";

Items properties

grid-column

grid-row

grid-column: 1/3;

This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.

grid-row: 2/4;

You define the horizontal lines you want an item to start and stop at using the grid-row property on a grid item.

justify-self

align-self

In CSS Grid, the content of each item is located in a box which is referred to as a cell. You can align the content's position within its cell horizontally using the justify-self property on a grid item. By default, this property has a value of stretch, which will make the content fill the whole width of the cell. This CSS Grid property as align-self accepts other values as well: start, center, end.

grid-area

grid-area: header;

U can place the custom item in area by referencing it name (grid-template-areas).

If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this

.item1 { 
	grid-area: 1/1/2/4; 
}

Note: grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

Functions

repeat

grid-template-rows: repeat(100, 50px); // create the 100 row grid, each row at 50px tall
grid-template-columns: repeat(2, 1fr 50px) 20px; // translate to -> grid-template-columns: 1fr 50px 1fr 50px 20px;

minmax

It's used to limit the size of items when the grid container changes size.

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

Other

auto-fill

This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container.

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

auto-fit

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

Note: Difference between auto-fill and auto-fit auto-fit works almost identically to auto-fill. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container.