How do you adjust the width of the columns for different screen sizes using CSS media queries?

You can adjust the width of the columns for different screen sizes using CSS media queries and specifying different widths for each screen size. Here's an example:

@media (max-width: 768px) {
  .column {
    width: 100%;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .column {
    width: 50%;
  }
}

@media (min-width: 1201px) {
  .column {
    width: 33.33%;
  }
}

In this example, the CSS code sets different widths for the columns based on screen sizes. Columns will occupy 100% width on screens up to 768 pixels, 50% width on screens between 769 and 1200 pixels, and 33.33% width on screens larger than 1200 pixels.