Html code responsive columns professional#
If you want to learn to build responsive websites on a professional level, you can consider checking out Scrimba's responsive web design bootcamp, as it takes students from beginner to advanced through 15 hours of interactive tutorials.įor this article, we’ll continue on with the grid we used in my first CSS Grid article. col-sm-4, col-md-8) or create media queries for every single screen size. This means we don’t have to clutter up the HTML with ugly class names (i.e.
Html code responsive columns how to#
In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen.Īnd the most beautiful part: the responsiveness will be added with a single line of CSS. Now that we’ve got the grid set up, it is often the case that we want to place the entire grid in the centre of the screen - this is where flexbox becomes useful, by placing the grid in a container element we can set the following properties on the container to centre the grid. In plain English this says ‘fill the screen with as many 200px wide columns as possible and then expand each column evenly to fill up any leftover space’.įinally, to space the items out nicely we can add a gap of 15px by adding: grid-gap: 15px We can also utilise the minmax function for the column size to allow each column to grow or shrink to fill the available space, for example if we want each column to be at least 200px wide and at most take up the entire width of the parent container we could add the following: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) As the screen size reduces, the number of columns will automatically reduce. The concept here is that instead of defining a set number of columns, we set a width on the parent container, and the number of columns that can fit within that container will be calculated dynamically for us. This provides us with the same responsive functionality with fewer lines of code and without having to worry about media queries and break points. The previous example becomes: grid-template-columns: repeat(auto-fit, 200px) However, we can also make use of CSS grids auto-fit keyword which is available within the repeat function and replaces the explicit number. One way to do this would be to use media queries and set 3 columns for large screens, 2 columns for medium screens and 1 column for small screens.
This approach only works if we know how many columns our grid will have, but becomes an issue when we want the number of columns to change as the screen size becomes smaller or wider. We could write this more succinctly using the grid repeat function, which can be used to specify a column a repeated number of times, with this the above could be re-written as follows: grid-template-columns: repeat(2, 200px) The grid-template columns property is used on a grid container to specify the columns within the grid, for example to create two columns of 200 pixels wide, we would write:grid-template-columns: 200px 200px grid-template-columns: 200px 200px You might be familiar with explicitly laying out grid items by specifying the row and column, but in the next section I will go over how to display a variable number of columns and items to make our grid responsive and dynamic. In order to achieve our desired layout we are going to make use of implicit columns in CSS grid. To get around this we can use CSS grid to create the layout, and if required we can use flexbox to position the entire grid on the page. First of all, when the items wrap as the screen width is reduced, the width of the parent container does not adjust accordingly, resulting in the content not being centred, and you end up with the following situation, where there is excess space on one side:įlexbox is great for laying items out in a single dimension, such as horizontally or in a column, and while it is possible to use flexbox to wrap items across multiple rows, this can lead to unwanted behaviour as shown above. When attempting to create such a layout using only flex-box we run into a few problems.
Markupįor this tutorial we will use the following markup: The best part of this approach is that it’s completely dynamic, allowing you to add as many or as few items to the grid as necessary which is great for situations when the number of items in the grid might change. In this blog post I will outline a quick and simple way to create a grid layout, with explanations for each CSS property used. It can be done in under 10 lines of CSS without the need for media queries. Creating a responsive grid layout is a common task which doesn’t need to be over-complicated.
0 kommentar(er)
