designer.css 633 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. .container {
  2. display: grid;
  3. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  4. gap: 16px;
  5. width: 90%;
  6. margin: 20px auto;
  7. }
  8. .card {
  9. border: 1px solid #ccc;
  10. padding: 20px;
  11. max-width: 200px;
  12. text-align: center;
  13. border-radius: 10px;
  14. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  15. }
  16. .card img {
  17. border-radius: 50%;
  18. width: 100px;
  19. height: 100px;
  20. object-fit: cover;
  21. }
  22. .card .info {
  23. margin-top: 15px;
  24. }
  25. .card .info p {
  26. margin: 5px 0;
  27. }
  28. /* 响应式设计, 如果是手机屏幕 */
  29. @media (max-width: 768px) {
  30. .container {
  31. grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  32. }
  33. }